<template xmlns="http://www.w3.org/1999/html">
  <div class="app-container">
    <!-- 左边 -->
    <div class="left">
      <div class="put">
        <el-input placeholder="请输入机器人名称" v-model="robot_name" @change="getRobotName($event)"
              prefix-icon="el-icon-search" clearable></el-input>
      </div>
      <div class="table">
        <el-table :data="robotList" @row-click="handleSelectionChange" height="100%"
              :class="[isDologin ? 'scrollbarShow' : 'commonScrollbarTable']"
              :header-cell-style="{ width: '100%', background: '#0d1f4e', color: '#bdbdc2', fontSize: '12px', 'text-align': 'left' }"
              :row-style="{ height: '40px', width: '100%', fontSize: '12px', color: '#bdbdc2', 'text-align': 'left' }"
              :cell-style="{ padding: '0px', width: '100%', 'text-align': 'left' }">
          <el-table-column prop="robot_type" label="类型" width="100px">
            <template slot-scope="scope">
              <div v-if="scope.row.robot_type === 0" style="color:#a5b1bd;">普通</div>
              <div v-if="scope.row.robot_type === 1" style="color:#5bbefc;">救援</div>
              <div v-if="scope.row.robot_type === 2" style="color:#d0a707;">防爆</div>
            </template>
          </el-table-column>
          <el-table-column prop="robot_name" label="名称" width="90px">
          </el-table-column>
          <el-table-column prop="robot_state" label="状态" width="70px">
            <template slot-scope="scope">
              <i class="el-icon-error" v-if="scope.row.robot_state === 0"
                 style="font-size: 20px; background-color:#fff; color: #a3a3a3; border-radius: 14px;"></i>
              <i class="el-icon-success" v-if="scope.row.robot_state === 1"
                 style="font-size: 20px; background-color:#fff; color:#24d141; border-radius: 14px;"></i>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="table-bottom">
        <el-table :data="plcList" height="100%" :class="[isDologin ? 'scrollbarShow' : 'commonScrollbarTable']"
                  :header-cell-style="{ width: '100%', background: '#0d1f4e', color: '#bdbdc2', fontSize: '12px', 'text-align': 'left' }"
                  :row-style="{ height: '30px', background: '#000224', width: '100%', fontSize: '12px', color: '#bdbdc2', 'text-align': 'left' }"
                  :cell-style="{ 'padding-right': '25px', width: '100%', 'text-align': 'left' }">
          <el-table-column prop="plc_name" label="PLC柜名称" width="100px">
          </el-table-column>
          <el-table-column prop="plc_num" label="PLC柜号" width="90px">
            <template slot-scope="scope">
              <div
                style="font-size: 12px;display:flex; flex-direction: row; flex-wrap: nowrap; justify-content: center;">
                <div v-if="scope.$index + 1 == 1"
                     style=" display: flex; justify-content: center;align-items: center;  width:13px; background-color:#a64317; height: 13px; border-radius: 9px; color: #fff; margin: 2px 10px 0 0 ;">
                  {{ scope.$index + 1 }}</div>
                <div v-if="scope.$index + 1 == 2"
                     style=" display: flex; justify-content: center;align-items: center;  width:13px; background-color:#a67c17; height: 13px; border-radius: 9px; color: #fff; margin: 2px 10px 0 0 ;">
                  {{ scope.$index + 1 }}</div>
                <div v-if="scope.$index + 1 == 3"
                     style=" display: flex; justify-content: center;align-items: center;  width:13px; background-color:#9aa617; height: 13px; border-radius: 9px; color: #fff; margin: 2px 10px 0 0 ;">
                  {{ scope.$index + 1 }}</div>
                <div v-if="scope.$index + 1 >= 4"
                     style=" display: flex; justify-content: center;align-items: center;  width:13px; background-color:#64a617; height: 13px; border-radius: 9px; color: #fff; margin: 2px 10px 0 0 ;">
                  {{ scope.$index + 1 }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="plc_state" label="状态" width="70px">
            <template slot-scope="scope">
              <i class="el-icon-error" v-if="scope.row.plc_state === 0"
                 style="font-size: 20px; background-color:#fff; color: #a3a3a3; border-radius: 14px;"></i>
              <i class="el-icon-success" v-if="scope.row.plc_state === 1"
                 style="font-size: 20px; background-color:#fff; color:#24d141; border-radius: 14px;"></i>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="table-bottom">
        <el-table :data="onlineList" height="100%" :class="[isDologin ? 'scrollbarShow' : 'commonScrollbarTable']"
                  :header-cell-style="{ width: '100%', background: '#0d1f4e', color: '#bdbdc2', fontSize: '12px', 'text-align': 'left' }"
                  :row-style="{ height: '30px', background: '#000224', width: '100%', fontSize: '12px', color: '#bdbdc2', 'text-align': 'left' }"
                  :cell-style="{ 'padding-right': '25px', width: '100%', 'text-align': 'left' }">
          <el-table-column prop="cameraName" label="摄像头名称" width="190px">
          </el-table-column>
          <el-table-column prop="loginValue" label="状态" width="70px">
            <template slot-scope="scope">
              <i class="el-icon-error" v-if="scope.row.loginValue === 0"
                 style="font-size: 20px; background-color:#fff; color: #a3a3a3; border-radius: 14px;"></i>
              <i class="el-icon-success" v-if="scope.row.loginValue != 0"
                 style="font-size: 20px; background-color:#fff; color:#24d141; border-radius: 14px;"></i>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 中间 -->
    <div class="video-center">
      <div>
        <p id="robotitle" style="font-size:18px;color: #e7e7ea;letter-spacing:1px;"></p>
      </div>
      <div class="center-box1">
        <!-- 转速盘 -->
        <div class="Speed-dial">
          <div id="gauges2" ref="gauges2" style="width:29%;height:150px; margin-top:7%"></div>
          <div id="gauges" ref="gauges" style="width:45%;height:170px;margin-left:-8px;margin-top:1%"></div>
          <div id="gauges3" ref="gauges3" style="width: 26%;height:150px;margin-right:3px;margin-top:7%"></div>
        </div>
        <div class="right-mode1">
          <div class="mode-box" v-hasPermi="['robot:xcwd:view']">
            <p>现场温度</p>
            <p>{{ xcwd }}</p>
          </div>
          <div class="mode-box" v-hasPermi="['robot:xcsd:view']">
            <p>现场湿度</p>
            <p>{{ xcsd }}</p>
          </div>
          <div class="mode-box" v-hasPermi="['robot:jqrms:view']">
            <p>模式</p>
            <p>{{ jqrms }}</p>
          </div>
          <div class="mode-box" v-hasPermi="['robot:fx:view']">
            <p>方向</p>
            <p style="color: #9f702c;" v-if="jqrfx=='后退'">{{ jqrfx }}</p>
            <p v-else-if="jqrfx=='无'">{{ jqrfx }}</p>
            <p style="color: #2da14e;" v-else >{{ jqrfx }}</p>
          </div>
          <div class="mode-box" v-hasPermi="['robot:dy:view']">
            <p>电池电压</p>
            <p style="color: #30a96a;" v-if="dcdy > 70">{{ dcdy }}v</p>
            <p style="color: #29ab33;" v-else-if="dcdy > 50">{{ dcdy }}v</p>
            <p style="color: #46cc51;" v-else-if="dcdy > 30">{{ dcdy }}v</p>
            <p style="color: #9eee25;" v-else-if="dcdy > 20">{{ dcdy }}v</p>
            <p style="color: #a5f1a6;" v-else-if="dcdy > 15">{{ dcdy }}v</p>
            <p v-else-if="dcdy=='无'">{{ dcdy }}</p>
            <p style="color: #e19532;" v-else>{{ dcdy }}v</p>
          </div>
        </div>
        <div class="right-mode2">
          <div class="mode-box" v-hasPermi="['robot:gss:view']">
            <p>栅格数</p>
            <p>{{ gswl }}</p>
          </div>
          <div class="mode-box" v-hasPermi="['robot:gsks:view']">
            <p>栅格孔数</p>
            <p>{{ jcgssl }}</p>
          </div>
          <div class="mode-box" v-hasPermi="['robot:sdsd:view']">
            <p>速度设定</p>
            <p>{{ jqrsd }}</p>
          </div>
          <div class="mode-box" v-hasPermi="['robot:sswy:view']">
            <p>实时位移</p>
            <p>{{ sswy }}</p>
          </div>
          <div class="mode-box" v-hasPermi="['robot:dczt:view']">
            <p>电池状态</p>
            <p style="color: #96e81a;" v-if="dczt=='充电'">{{ dczt }}</p>
            <p v-else-if="dczt=='无'">{{ dczt }}</p>
            <p style="color: #9f702c;" v-else >{{ dczt }}</p>
          </div>
        </div>

        <div style="margin-left:14px;">
          <img src="../../components/images/line1.png" alt="">
        </div>

        <div class="Mode-selection">
          <p>模式选择</p>
        </div>

        <!-- 五个按钮 -->
        <div class="Operation-button" id="#btn">
          <div class="Operation-buttonBox" @click="jqrmsF('1')">
            <el-button size="mini" circle @click="selectedTab = 0"></el-button>
            <p>手动模式</p>
          </div>
<!--          <div class="Operation-buttonBox" @click="jqrmsF('2')">
            <el-button size="mini" circle
                       style=" background: linear-gradient(227deg, #0F947C, #10DAB2);">
            </el-button>
            <p>自动模式</p>
          </div>-->
          <div class="Operation-buttonBox" @click="jqrzymsF('0')" v-hasPermi="['robot:kzymzyms:view']">
            <el-button @click="selectedTab = 3" size="mini" circle
                       style="
                                                                            background: linear-gradient(227deg, #C45016, #F58614);">
            </el-button>
            <p>自由</p>
          </div>
          <div class="Operation-buttonBox" @click="jqrzymsF('3')">
            <el-button size="mini" circle
                       style="
                                                                            background: linear-gradient(227deg, #337F17, #3CA813);">
            </el-button>
            <p>返航</p>
          </div>
          <div class="Operation-buttonBox" @click="zt()">
            <el-button size="mini" circle style="
                      background: linear-gradient(227deg, #B72517, #EA392D);">
            </el-button>
            <p>暂停</p>
          </div>
        </div>
      </div>
      <!-- 手动模式 -->
      <div class="center-box2-1" v-if="selectedTab === 0">
        <div class="right-bottomTitle">
          <p>手动模式</p>
          <span></span>
        </div>
        <div class="right-bottomBox">
          <div class="right-bottomBox1">
            <div class="right-bottomBox1-1">
              <p contenteditable="true" id="mbwzid">0</p>
              <span>m</span>
              <el-button class="btn" size="default" @click="mbwz()">目标位置</el-button>
            </div>
            <div class="right-bottomBox1-2">
              <el-dropdown @command="sdmslb">
                <el-button type="primary" size="min" style="width: 80px;
                                                                                                    height: 25px;background: #0F1A43 !important;
                                                                                                    display: flex;
                                                                                                    justify-content: space-around;
                                                                                                    align-items: center;
                                                                                                    border: 2px solid #54619D;
                                                                                                    border-radius: 10px;
                                                                                                    font-size: 12px;
                                                                                                    font-family: Bahnschrift;
                                                                                                    font-weight: 400;
                                                                                                    color: #C1C1C1;">
                  {{ sdmssdzd }}<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="0">0</el-dropdown-item>
                  <el-dropdown-item command="1000">1000</el-dropdown-item>
                  <el-dropdown-item command="2000">2000</el-dropdown-item>
                  <el-dropdown-item command="3000">3000</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <span>r/min</span>
              <el-button class="btn" size="default" @click="sdmsdsd()">速度设定</el-button>
            </div>
          </div>
          <div class="right-bottomBox1-3" v-if="showButtons">
            <div class="right-bottomBox1-3-1">
              <el-button class="btn1" size="default" @click="fg()">放钩</el-button>
              <el-button class="btn2" size="default" @click="sg()">收钩</el-button>
            </div>
          </div>
          <div class="right-bottomBox1-4">
            <div class="right-bottomBox1-4-1">
              <el-button class="btn1" size="default" @click="sdmsqd()">启动</el-button>
              <el-button class="btn2" size="default" @click="sdmsqj()">前进</el-button>
              <el-button class="btn3" size="default" @click="sdmsht()">后退</el-button>
            </div>
          </div>
        </div>
      </div>
      <!-- 自动模式 -->
      <div class="center-box2-2" v-if="selectedTab === 1">
        <div class="right-bottomTitle">
          <p>自动模式</p>
          <span></span>
        </div>
        <div class="right-bottomBox1">
          <el-dropdown @command="zdmslb">
            <el-button type="primary" size="min" style="width: 80px;
                                                                                              height: 25px;background: #0F1A43 !important;
                                                                                              display: flex;
                                                                                              justify-content: space-around;
                                                                                              align-items: center;
                                                                                              border: 2px solid #54619D;
                                                                                              border-radius: 10px;
                                                                                              font-size: 12px;
                                                                                              font-family: Bahnschrift;
                                                                                              font-weight: 400;
                                                                                              color: #C1C1C1;">
              {{ zdmssdzd }}<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="0">0</el-dropdown-item>
              <el-dropdown-item command="1000">1000</el-dropdown-item>
              <el-dropdown-item command="2000">2000</el-dropdown-item>
              <el-dropdown-item command="3000">3000</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <span>r/min</span>
          <el-button class="btn" size="default" @click="zdmsdsd()">速度设定</el-button>
        </div>
        <div class="right-bottomBox2">
          <el-button class="btn1" size="default" @click="zdmsqd()">启动</el-button>
          <el-button class="btn2" size="default" @click="dd()">定点</el-button>
          <el-button class="btn3" size="default" @click="lx()">连续</el-button>
        </div>
      </div>
      <!-- 一键返航 -->
      <div class="center-box2-3" v-if="selectedTab === 2">
        <div class="right-bottomTitle">
          <p>一键返航</p>
          <span></span>
        </div>
        <div class="right-bottomBox">
          <div class="right-bottomBox1" v-if="showButtons">
            <el-button class="btn1" size="default" @click="fg()">放钩</el-button>
            <el-button class="btn2" size="default" @click="sg()">收钩</el-button>
          </div>
          <div class="right-bottomBox2">
            <el-button class="btn" size="default" @click="yjfh()">返航</el-button>
          </div>
        </div>
      </div>
      <!-- 自由模式 -->
      <div class="center-box2-4" v-if="selectedTab === 3">
        <div class="right-bottomTitle">
          <p>自由模式</p>
          <span></span>
        </div>
        <div class="right-bottomBox">
          <div class="right-bottomBox1">
            <el-dropdown @command="zymslb">
              <el-button type="primary" size="min" style="width: 80px;
                                                                                                height: 25px;background: #0F1A43 !important;
                                                                                                display: flex;
                                                                                                justify-content: space-around;
                                                                                                align-items: center;
                                                                                                border: 2px solid #54619D;
                                                                                                border-radius: 10px;
                                                                                                font-size: 12px;
                                                                                                font-family: Bahnschrift;
                                                                                                font-weight: 400;
                                                                                                color: #C1C1C1;">
                {{ zymssdzd }}<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="0">0</el-dropdown-item>
                <el-dropdown-item command="1000">1000</el-dropdown-item>
                <el-dropdown-item command="2000">2000</el-dropdown-item>
                <el-dropdown-item command="3000">3000</el-dropdown-item>
                <el-dropdown-item command="4000">4000</el-dropdown-item>
                <el-dropdown-item command="5000">5000</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <span>r/min</span>
            <el-button class="btn" size="default" @click="zymsdsd()">速度设定</el-button>
          </div>
          <div class="right-bottomBox2" v-if="showButtons">
            <el-button class="btn1" size="default" @click="fg()">放钩</el-button>
            <el-button class="btn2" size="default" @click="sg()">收钩</el-button>
          </div>
          <div class="right-bottomBox3">
            <el-button class="btn1" size="default" @click="sdmsqd()">启动</el-button>
            <el-button class="btn2" size="default" @click="sdmsqj()">前进</el-button>
            <el-button class="btn3" size="default" @click="sdmsht()">后退</el-button>
          </div>
        </div>

      </div>
    </div>

    <!-- 右边 -->
    <div class="video-right">
      <div> <!--<div class="right-header">-->
        <p style="font-size:18px;color: #e7e7ea;letter-spacing:1px;">视频监控</p>
      </div>
      <!-- 大华摄像头 -->
      <div class="videoBox" v-show="this.camera_type == 0 || this.camera_type == null">
        <div class="videobox1">
          <div class="box" :class="{ active: activeBox === 1 }" @click=" activeBox = 1; Qyt = true; Hyt = false">
            <video v-show="videoShowQ" id="DHQvideo" style="width:100%;height:99%" class="video-js" controls
                   autoplay autobuffer muted preload="auto" disablePictureInPicture="true"
                   controlslist="nodownload"></video>
          </div>
          <div class="box" :class="{ active: activeBox === 2 }" @click=" activeBox = 2; Qyt = false; Hyt = true">
            <video v-show="videoShowH" id="DHHvideo" class="video-js" style="width:100%;height:99%" controls
                   autoplay autobuffer muted preload="auto" disablePictureInPicture="true"
                   controlslist="nodownload"></video>
          </div>
        </div>
        <div class="videobox2">
          <div class="videobox2-1">
            <p>音视频</p>
            <span></span>
          </div>
          <div class="videobox2-2">
            <div class="videobox2-2-1">
              <el-dropdown @command="sxtxz">
                <el-button type="primary" size="min" style="width: 90px;
                                                                height: 25px;background: #0F1A43 !important;
                                                                display: flex;
                                                                justify-content: space-around;
                                                                align-items: center;
                                                                border: 2px solid #54619D;
                                                                border-radius: 10px;
                                                                font-size: 12px;
                                                                font-family: Bahnschrift;
                                                                font-weight: 400;
                                                                color: #C1C1C1;">
                  {{ sxtjs }}<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="前摄校时" @click.native="Qtiming">前摄校时</el-dropdown-item>
                  <el-dropdown-item command="后摄校时" @click.native="Htiming">后摄校时</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <p contenteditable="true" id="sy"></p>
            </div>

            <div class="videobox2-2-3">
              <el-button class="btn1" size="default" @click="Qwatermark">前像头水印</el-button>
              <el-button class="btn2" size="default" @click="Hwatermark">后像头水印</el-button>
            </div>
            <div class="videobox2-2-4">
              <el-button class="btn" @click="QstartVideo" size="mini">前像头录像</el-button>
              <el-button class="btn" @click="HstartVideo" size="mini">后像头录像</el-button>
            </div>
            <div class="videobox2-2-5">
              <el-button class="btn" @click="QendVideo" size="mini">前像头停止录制</el-button>
              <el-button class="btn" @click="HendVideo" size="mini">后像头停止录制</el-button>
            </div>
          </div>
        </div>
        <img src="../../components/images/line.png" alt="">
        <div class="videobox3">
          <div class="videobox3-1">
            <p>云台</p>
            <span></span>
          </div>
          <div class="videobox3-2" v-show="Qyt">
            <!-- 八角云盘 -->
            <div class="ptz">
              <!-- /* 外圆环 */ -->
              <div id="round"></div>
              <!-- /* 黑色内圆环 */ -->
              <div id="center_black"></div>
              <div id="center_blue" @click="Qpicture">
                <span>抓图</span>
              </div>
              <div id="circle0">
                <div id="left">
                  <div class="circle-left" id="circle2" @click="startQUpRunning"
                       @mousedown="startQUpRunning1" @mouseup="stopQUpRunning1">
                    <span>上</span>
                  </div>
                  <div class="circle-left" id="circle3" @click="startQRUpRunning"
                       @mousedown="startQRUpRunning1" @mouseup="stopQRUpRunning1">
                    <span>右上</span>
                  </div>
                  <div class="circle-left" id="circle4" @click="startQRighttRunning"
                       @mousedown="startQRighttRunning1" @mouseup="stopQRightRunning1">
                    <span>右</span>
                  </div>
                  <div class="circle-left" id="circle5" @click="startQRDwnRunning"
                       @mousedown="startQRDwnRunning1" @mouseup="stopQRDwnRunning1">
                    <span>右下</span>
                  </div>
                </div>
                <div id="right">
                  <div class="circle-right" id="circle9" @click="startQLUpRunning"
                       @mousedown="startQLUpRunning1" @mouseup="stopQLUpRunning1">
                    <span>左上</span>
                  </div>
                  <div class="circle-right" id="circle8" @click="startQLeftRunning"
                       @mousedown="startQLeftRunning1" @mouseup="stopQLeftRunning1">
                    <span>左</span>
                  </div>
                  <div class="circle-right" id="circle7" @click="startQLDwnRunning"
                       @mousedown="startQLDwnRunning1" @mouseup="stopQLDwnRunning1">
                    <span>左下</span>
                  </div>
                  <div class="circle-right" id="circle6" @click="startQDwnRunning"
                       @mousedown="startQDwnRunning1" @mouseup="stopQDwnRunning1">
                    <span>下</span>
                  </div>
                </div>
              </div>
            </div>
            <!-- 变倍 -->
            <div class="videobox3-3">
              <div class="videobox3-3-1">
                <p class="btn1" @click="BbjClick" @mousedown="BbjClick1" @mouseup="onLongBbj1"><i
                  class="el-icon-minus"></i></p>
                <p>变倍</p>
                <p class="btn2" @click="BbAddClick" @mousedown="BbAddClick1" @mouseup="onLongAdd1"><i
                  class="el-icon-plus"></i></p>
              </div>
              <div class="videobox3-3-1">
                <p class="btn1" @click="startBjjRunning" @mousedown="startBjjRunning1"
                   @mouseup="stopBjjRunning1"><i class="el-icon-minus"></i></p>
                <p>变焦</p>
                <p class="btn2" @click="startBjAddRunning" @mousedown="startBjAddRunning1"
                   @mouseup="stopBjAddRunning1"><i class="el-icon-plus"></i></p>
              </div>
              <div class="videobox3-3-1">
                <p class="btn1" @click="startGqjRunning" @mousedown="startGqjRunning1"
                   @mouseup="stopGqjRunning1"><i class="el-icon-minus"></i></p>
                <p>光圈</p>
                <p class="btn2" @click="startGqAddRunning" @mousedown="startGqAddRunning1"
                   @mouseup="stopGqAddRunning1"><i class="el-icon-plus"></i></p>
              </div>
            </div>
          </div>
          <div class="videobox3-2" v-show="Hyt">
            <!-- 八角云盘 -->
            <div class="ptz">
              <!-- /* 外圆环 */ -->
              <div id="round"></div>
              <!-- /* 黑色内圆环 */ -->
              <div id="center_black"></div>
              <div id="center_blue" @click="Hpicture">
                <span>抓图</span>
              </div>
              <div id="circle0">
                <div id="left">
                  <div class="circle-left" id="circle2" @click="startHUpRunning"
                       @mousedown="startHUpRunning1" @mouseup="stopHUpRunning1">
                    <span>上</span>
                  </div>
                  <div class="circle-left" id="circle3" @click="startHRUpRunning"
                       @mousedown="startHRUpRunning1" @mouseup="stopHRUpRunning1">
                    <span>右上</span>
                  </div>
                  <div class="circle-left" id="circle4" @click="startHRighttRunning"
                       @mousedown="startHRighttRunning1" @mouseup="stopHRightRunning1">
                    <span>右</span>
                  </div>
                  <div class="circle-left" id="circle5" @click="startHRDwnRunning"
                       @mousedown="startHRDwnRunning1" @mouseup="stopHRDwnRunning1">
                    <span>右下</span>
                  </div>
                </div>
                <div id="right">
                  <div class="circle-right" id="circle9" @click="startHLUpRunning"
                       @mousedown="startHLUpRunning1" @mouseup="stopHLUpRunning1">
                    <span>左上</span>
                  </div>
                  <div class="circle-right" id="circle8" @click="startHLeftRunning"
                       @mousedown="startHLeftRunning1" @mouseup="stopHLeftRunning1">
                    <span>左</span>
                  </div>
                  <div class="circle-right" id="circle7" @click="startHLDwnRunning"
                       @mousedown="startHLDwnRunning1" @mouseup="stopHLDwnRunning1">
                    <span>左下</span>
                  </div>
                  <div class="circle-right" id="circle6" @click="startHDwnRunning"
                       @mousedown="startHDwnRunning1" @mouseup="stopHDwnRunning1">
                    <span>下</span>
                  </div>
                </div>
              </div>
            </div>
            <!-- 变倍 -->
            <div class="videobox3-3">
              <div class="videobox3-3-1">
                <p class="btn1" @click="startHBbjRunning" @mousedown="startHBbjRunning1"
                   @mouseup="stopHBbjRunning1"><i class="el-icon-minus"></i></p>
                <p>变倍</p>
                <p class="btn2" @click="startHBbAddRunning" @mousedown="startHBbAddRunning1"
                   @mouseup="stopHBbAddRunning1"><i class="el-icon-plus"></i></p>
              </div>
              <div class="videobox3-3-1">
                <p class="btn1" @click="startHBjjRunning" @mousedown="startHBjjRunning1"
                   @mouseup="stopHBjjRunning1"><i class="el-icon-minus"></i></p>
                <p>变焦</p>
                <p class="btn2" @click="startHBjAddRunning" @mousedown="startHBjAddRunning1"
                   @mouseup="stopHBjAddRunning1"><i class="el-icon-plus"></i></p>
              </div>
              <div class="videobox3-3-1">
                <p class="btn1" @click="startHGqjRunning" @mousedown="startHGqjRunning1"
                   @mouseup="stopHGqjRunning1"><i class="el-icon-minus"></i></p>
                <p>光圈</p>
                <p class="btn2" @click="startHGqAddRunning" @mousedown="startHGqAddRunning1"
                   @mouseup="stopHGqAddRunning1"><i class="el-icon-plus"></i></p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 吊舱摄像头 -->
      <div class="videoBox" v-show="this.camera_type == 2">
        <div class="videobox1">
          <div class="box" :class="{ active: activeBox === 1 }" @click=" activeBox = 1; Qyt = true; Hyt = false">
            <video v-show="videoShowQ" id="DCQvideo" class="video-js" style="width:100%;height:99%" controls
                   autoplay autobuffer muted preload="auto" disablePictureInPicture="true"
                   controlslist="nodownload"></video>
          </div>
          <div class="box" :class="{ active: activeBox === 2 }" @click=" activeBox = 2; Qyt = false; Hyt = true">
            <video v-show="videoShowH" id="DCHvideo" class="video-js" style="width:100%;height:99%" controls
                   autoplay autobuffer muted preload="auto" disablePictureInPicture="true"
                   controlslist="nodownload"></video>
          </div>
        </div>
        <div class="videobox2">
          <div class="videobox2-1">
            <p>音视频</p>
            <span></span>
          </div>
          <div class="videobox2-2">
            <div class="videobox2-2-1">
              <el-dropdown>
                <el-button disabled type="primary" size="min" style="width: 90px;
                                                                height: 25px;background: #0F1A43 !important;
                                                                margin-bottom:5%;
                                                                display: flex;
                                                                justify-content: space-around;
                                                                align-items: center;
                                                                border: 2px solid #54619D;
                                                                border-radius: 10px;
                                                                font-size: 12px;
                                                                font-family: Bahnschrift;
                                                                font-weight: 400;
                                                                color: #C1C1C1;">
                  <!--                  {{ sxtjs }}-->不可用<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="前摄校时">前摄校时</el-dropdown-item>
                  <el-dropdown-item command="后摄校时">后摄校时</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <el-dropdown>
                <el-button disabled type="primary" size="min" style="width: 90px;
                                                                height: 25px;background: #0F1A43 !important;
                                                                display: flex;
                                                                justify-content: space-around;
                                                                align-items: center;
                                                                border: 2px solid #54619D;
                                                                border-radius: 10px;
                                                                font-size: 12px;
                                                                font-family: Bahnschrift;
                                                                font-weight: 400;
                                                                color: #C1C1C1;">
                  <!--                  {{ sxtcks }}-->不可用<i
                  class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="2窗口">2窗口</el-dropdown-item>
                  <el-dropdown-item command="1窗口">1窗口</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
            <div class="videobox2-2-3">
              <el-button class="btn1" size="default" disabled>前像头水印</el-button>
              <el-button disabled class="btn2" size="default">后像头水印</el-button>
            </div>
            <div class="videobox2-2-4">
              <el-button class="btn" size="mini">前像头录像</el-button>
              <el-button class="btn" size="mini">后像头录像</el-button>
            </div>
            <div class="videobox2-2-5">
              <el-button class="btn" size="mini">前像头停止录制</el-button>
              <el-button class="btn" size="mini">后像头停止录制</el-button>
            </div>
          </div>
        </div>
        <img src="../../components/images/line.png" alt="">
        <div class="videobox3">
          <div class="videobox3-1">
            <p>云台</p>
            <span></span>
          </div>
          <div class="videobox3-2" v-show="Qyt">
            <!-- 八角云盘 -->
            <div class="ptz">
              <!-- /* 外圆环 */ -->
              <div id="round"></div>
              <!-- /* 黑色内圆环 */ -->
              <div id="center_black"></div>
              <div id="center_blue" @click="DCQpicture">
                <span>抓图</span>
              </div>
              <div id="circle0">
                <div id="left">
                  <div class="circle-left" id="circle2" @click="startQUp">
                    <span>上</span>
                  </div>
                  <div class="circle-left" id="circle3" @click="startQRightUp">
                    <span>右上</span>
                  </div>
                  <div class="circle-left" id="circle4" @click="startQRight">
                    <span>右</span>
                  </div>
                  <div class="circle-left" id="circle5" @click="startQRightDow">
                    <span>右下</span>
                  </div>
                </div>
                <div id="right">
                  <div class="circle-right" id="circle9" @click="startQLeftUp">
                    <span>左上</span>
                  </div>
                  <div class="circle-right" id="circle8" @click="startQLeft">
                    <span>左</span>
                  </div>
                  <div class="circle-right" id="circle7" @click="startQLeftDow">
                    <span>左下</span>
                  </div>
                  <div class="circle-right" id="circle6" @click="startQDow">
                    <span>下</span>
                  </div>
                </div>
              </div>
            </div>
            <!-- 变倍 -->
            <div class="videobox3-3">
              <div class="videobox3-3-1">
                <p class="btn1" @click="BbjClick" @mousedown="BbjClick1" @mouseup="onLongBbj1"><i
                  class="el-icon-minus"></i></p>
                <p>变倍</p>
                <p class="btn2" @click="BbAddClick" @mousedown="BbAddClick1" @mouseup="onLongAdd1"><i
                  class="el-icon-plus"></i></p>
              </div>
              <div class="videobox3-3-1">
                <p class="btn1" @click="startBjjRunning" @mousedown="startBjjRunning1"
                   @mouseup="stopBjjRunning1"><i class="el-icon-minus"></i></p>
                <p>变焦</p>
                <p class="btn2" @click="startBjAddRunning" @mousedown="startBjAddRunning1"
                   @mouseup="stopBjAddRunning1"><i class="el-icon-plus"></i></p>
              </div>
              <div class="videobox3-3-1">
                <p class="btn1" @click="startGqjRunning" @mousedown="startGqjRunning1"
                   @mouseup="stopGqjRunning1"><i class="el-icon-minus"></i></p>
                <p>光圈</p>
                <p class="btn2" @click="startGqAddRunning" @mousedown="startGqAddRunning1"
                   @mouseup="stopGqAddRunning1"><i class="el-icon-plus"></i></p>
              </div>
            </div>
          </div>
          <div class="videobox3-2" v-show="Hyt">
            <!-- 八角云盘 -->
            <div class="ptz">
              <!-- /* 外圆环 */ -->
              <div id="round"></div>
              <!-- /* 黑色内圆环 */ -->
              <div id="center_black"></div>
              <div id="center_blue" @click="DCHpicture">
                <span>抓图</span>
              </div>
              <div id="circle0">
                <div id="left">
                  <div class="circle-left" id="circle2" @click="startHUp">
                    <span>上</span>
                  </div>
                  <div class="circle-left" id="circle3" @click="startHRightUp">
                    <span>右上</span>
                  </div>
                  <div class="circle-left" id="circle4" @click="startHRight">
                    <span>右</span>
                  </div>
                  <div class="circle-left" id="circle5" @click="startHRightDow">
                    <span>右下</span>
                  </div>
                </div>
                <div id="right">
                  <div class="circle-right" id="circle9" @click="startHLeftUp">
                    <span>左上</span>
                  </div>
                  <div class="circle-right" id="circle8" @click="startHLeft">
                    <span>左</span>
                  </div>
                  <div class="circle-right" id="circle7" @click="startHLeftDow">
                    <span>左下</span>
                  </div>
                  <div class="circle-right" id="circle6" @click="startHDow">
                    <span>下</span>
                  </div>
                </div>
              </div>
            </div>
            <!-- 变倍 -->
            <div class="videobox3-3">
              <div class="videobox3-3-1">
                <p class="btn1" @click="startDCHsx"><i class="el-icon-minus"></i></p>
                <p>变倍</p>
                <p class="btn2" @click="startDCHfd"><i class="el-icon-plus"></i></p>
              </div>
              <div class="videobox3-3-1">
                <p class="btn1"><i class="el-icon-minus"></i></p>
                <p>变焦</p>
                <p class="btn2"><i class="el-icon-plus"></i></p>
              </div>
              <div class="videobox3-3-1">
                <p class="btn1"><i class="el-icon-minus"></i></p>
                <p>光圈</p>
                <p class="btn2"><i class="el-icon-plus"></i></p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 海康摄像头 -->
      <div class="videoBox" v-show="this.camera_type == 1">
        <div class="videobox1">
          <div class="box" :class="{ active: activeBox === 1 }" @click=" activeBox = 1; Qyt = true; Hyt = false">
            <video id="HKvideo" class="video-js" style="width:100%;height:99%" controls autoplay autobuffer
                   muted preload="auto" disablePictureInPicture="true" controlslist="nodownload"></video>
          </div>
          <div class="box" :class="{ active: activeBox === 2 }" @click=" activeBox = 2; Qyt = false; Hyt = true">
          </div>
        </div>
        <div class="videobox2">
          <div class="videobox2-1">
            <p>音视频</p>
            <span></span>
          </div>
          <div class="videobox2-2">
            <div class="videobox2-2-1">
              <el-dropdown>
                <el-button type="primary" size="min" style="width: 80px;
                                                                height: 25px;background: #0F1A43 !important;
                                                                display: flex;
                                                                justify-content: space-around;
                                                                align-items: center;
                                                                border: 2px solid #54619D;
                                                                border-radius: 10px;
                                                                font-size: 12px;
                                                                font-family: Bahnschrift;
                                                                font-weight: 400;
                                                                color: #C1C1C1;">
                  前后摄像头<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="前摄像头">前摄像头</el-dropdown-item>
                  <el-dropdown-item command="后摄像头">后摄像头</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <p contenteditable="true" id="sy"></p>
            </div>
            <div class="videobox2-2-2">
              <el-dropdown>
                <el-button type="primary" size="min" style="width: 70px;
                                                                height: 25px;background: #0F1A43 !important;
                                                                display: flex;
                                                                justify-content: space-around;
                                                                align-items: center;
                                                                border: 2px solid #54619D;
                                                                border-radius: 10px;
                                                                font-size: 12px;
                                                                font-family: Bahnschrift;
                                                                font-weight: 400;
                                                                color: #C1C1C1;">
                  窗口<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="2窗口">2窗口</el-dropdown-item>
                  <el-dropdown-item command="1窗口">1窗口</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>

            </div>
            <div class="videobox2-2-3">
              <el-button class="btn1" size="default" @click="HKwatermark">摄像头水印</el-button>
              <el-button class="btn2" size="default" @click="HKtiming">摄像头校时</el-button>
            </div>
            <div class="videobox2-2-4">
              <el-button class="btn" size="mini">前像头录像</el-button>
              <el-button class="btn" size="mini">后像头录像</el-button>
            </div>
            <div class="videobox2-2-5">
              <el-button class="btn" @click="HKstartVideo" size="mini">摄像头开始录</el-button>
              <el-button class="btn" @click="HKendVideo" size="mini">摄像头停止录</el-button>
            </div>
          </div>
        </div>
        <img src="../../components/images/line.png" alt="">
        <div class="videobox3">
          <div class="videobox3-1">
            <p>云台</p>
            <span></span>
          </div>
          <div class="videobox3-2" v-show="Qyt">
            <!-- 八角云盘 -->
            <div class="ptz">
              <!-- /* 外圆环 */ -->
              <div id="round"></div>
              <!-- /* 黑色内圆环 */ -->
              <div id="center_black"></div>
              <div id="center_blue" @click="HKpicture">
                <span>抓图</span>
              </div>
              <div id="circle0">
                <div id="left">
                  <div class="circle-left" id="circle2" @click="startUp" @mousedown="startUp1"
                       @mouseup="stopUp1">
                    <span>上</span>
                  </div>
                  <div class="circle-left" id="circle3" @click="startUpRight" @mousedown="startUpRight1"
                       @mouseup="stopUpRight1">
                    <span>右上</span>
                  </div>
                  <div class="circle-left" id="circle4" @click="startRight" @mousedown="startRight1"
                       @mouseup="stopRight1">
                    <span>右</span>
                  </div>
                  <div class="circle-left" id="circle5" @click="startDownRight"
                       @mousedown="startDownRight1" @mouseup="stopDownRight1">
                    <span>右下</span>
                  </div>
                </div>
                <div id="right">
                  <div class="circle-right" id="circle9" @click="startUpLeft" @mousedown="startUpLeft1"
                       @mouseup="stopUpLeft1">
                    <span>左上</span>
                  </div>
                  <div class="circle-right" id="circle8" @click="startLeft" @mousedown="startLeft1"
                       @mouseup="stopLeft1">
                    <span>左</span>
                  </div>
                  <div class="circle-right" id="circle7" @click="startDownLeft"
                       @mousedown="startDownLeft1" @mouseup="stopDownLeft1">
                    <span>左下</span>
                  </div>
                  <div class="circle-right" id="circle6" @click="startDown" @mousedown="startDown1"
                       @mouseup="stopDown1">
                    <span>下</span>
                  </div>
                </div>
              </div>
            </div>
            <!-- 变倍 -->
            <div class="videobox3-3">
              <div class="videobox3-3-1">
                <p class="btn1" @click="startBBminus" @mousedown="startBBminus1" @mouseup="stopBBminus1"><i
                  class="el-icon-minus"></i></p>
                <p>变倍</p>
                <p class="btn2" @click="startBBplus" @mousedown="startBBplus1" @mouseup="stopBBplus1"><i
                  class="el-icon-plus"></i></p>
              </div>
              <div class="videobox3-3-1">
                <p class="btn1" @click="startBJminus" @mousedown="startBJminus1" @mouseup="stopBJminus1"><i
                  class="el-icon-minus"></i></p>
                <p>变焦</p>
                <p class="btn2" @click="startBJplus" @mousedown="startBJplus1" @mouseup="stopBJplus1"><i
                  class="el-icon-plus"></i></p>
              </div>
              <div class="videobox3-3-1">
                <p class="btn1" @click="startGQminus" @mousedown="startGQminus1" @mouseup="stopGQminus1"><i
                  class="el-icon-minus"></i></p>
                <p>光圈</p>
                <p class="btn2" @click="startGQplus" @mousedown="startGQplus1" @mouseup="stopGQplus1"><i
                  class="el-icon-plus"></i></p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import _ from 'lodash'
  import * as echarts from "echarts";
  import {listonPageRobotConfig} from "@/api/robot/robotconfig/robotconfig";
  import {listsPlc} from "@/api/robot/plc/plc";
  import $ from "jquery";
  import {
    HendVideo,
    HfocusAdd,
    HfocusAdd1,
    HfocusAddEnd1,
    HfocusDec,
    HfocusDec1,
    HfocusDecEnd1,
    HirisAdd,
    HirisAdd1,
    HirisAddEnd1,
    HirisDec,
    HirisDec1,
    HirisDecEnd1,
    Hpicture,
    HptzDown,
    HptzDown1,
    HptzDownEnd1,
    HptzLeft,
    HptzLeft1,
    HptzLeftDown,
    HptzLeftDown1,
    HptzLeftDownEnd1,
    HptzLeftEnd1,
    HptzLeftUp,
    HptzLeftUp1,
    HptzLeftUpEnd1,
    HptzRight,
    HptzRight1,
    HptzRightDown,
    HptzRightDown1,
    HptzRightDownEnd1,
    HptzRightEnd1,
    HptzRightUp,
    HptzRightUp1,
    HptzRightUpEnd1,
    HptzUp,
    HptzUp1,
    HptzUpEnd1,
    HstartVideo,
    Htiming,
    Hwatermark,
    HzoomAdd,
    HzoomAdd1,
    HzoomAddEnd1,
    HzoomDec,
    HzoomDec1,
    HzoomDecEnd1,
    onLineStatus,
    QendVideo,
    QfocusAdd,
    QfocusAdd1,
    QfocusAddEnd1,
    QfocusDec,
    QfocusDec1,
    QfocusDecEnd1,
    QirisAdd,
    QirisAdd1,
    QirisAddEnd1,
    QirisDec,
    QirisDec1,
    QirisDecEnd1,
    Qpicture,
    QptzDown,
    QptzDown1,
    QptzDownEnd1,
    QptzLeft,
    QptzLeft1,
    QptzLeftDown,
    QptzLeftDown1,
    QptzLeftDownEnd1,
    QptzLeftEnd1,
    QptzLeftUp,
    QptzLeftUp1,
    QptzLeftUpEnd1,
    QptzRight,
    QptzRight1,
    QptzRightDown,
    QptzRightDown1,
    QptzRightDownEnd1,
    QptzRightEnd1,
    QptzRightUp,
    QptzRightUp1,
    QptzRightUpEnd1,
    QptzUp,
    QptzUp1,
    QptzUpEnd1,
    QstartVideo,
    Qtiming,
    Qwatermark,
    QzoomAdd,
    QzoomAdd1,
    QzoomAddEnd1,
    QzoomDec,
    QzoomDec1,
    QzoomDecEnd1
  } from "@/api/robot/camera/cameraDH/video";
  import {
    ddspCmd,
    fgCmd,
    htCmd,
    ippingCmd,
    jqrdataCmd,
    jqrsdCmd,
    jqrsdzymsCmd,
    lxspCmd,
    mbwzCmd,
    msszCmd,
    qjCmd,
    robotrunCmd,
    robotstopCmd,
    sgCmd,
    xjsdCmd,
    yjfhCmd,
    zdqdCmd,
    zymshtCmd,
    zymsmsszCmd,
    zymsqjCmd,
    zymsrobotrunCmd
  } from "@/api/robot/modbus/modbus";
  import {
    DCHendVideo,
    DCHLeftDown,
    DCHLeftUp,
    DCHpicture,
    DCHptzDown,
    DCHptzLeft,
    DCHptzRight,
    DCHptzStop,
    DCHptzUp,
    DCHRightDown,
    DCHRightUp,
    DCHsmbPicture,
    DCHsmbVideo,
    DCHstartVideo,
    DCHzoomFocus,
    DCHzoomLess,
    DCHzoomStop,
    DCQendVideo,
    DCQLeftDown,
    DCQLeftUp,
    DCQpicture,
    DCQptzDown,
    DCQptzLeft,
    DCQptzRight,
    DCQptzStop,
    DCQptzUp,
    DCQRightDown,
    DCQRightUp,
    DCQsmbPicture,
    DCQsmbVideo,
    DCQstartVideo,
    DCQzoomFocus,
    DCQzoomLess,
    DCQzoomStop
  } from "@/api/robot/camera/cameraDC/video";
  import {
    HKendVideo,
    HKfocusAdd,
    HKfocusAdd1,
    HKfocusAddEnd1,
    HKfocusDec,
    HKfocusDec1,
    HKfocusDecEnd1,
    HKirisAdd,
    HKirisAdd1,
    HKirisAddEnd1,
    HKirisDec,
    HKirisDec1,
    HKirisDecEnd1,
    HKpicture,
    HKptzDown,
    HKptzDown1,
    HKptzDownEnd1,
    HKptzLeft,
    HKptzLeft1,
    HKptzLeftDown,
    HKptzLeftDown1,
    HKptzLeftDownEnd1,
    HKptzLeftEnd1,
    HKptzLeftUp,
    HKptzLeftUp1,
    HKptzLeftUpEnd1,
    HKptzRight,
    HKptzRight1,
    HKptzRightDown,
    HKptzRightDown1,
    HKptzRightDownEnd1,
    HKptzRightEnd1,
    HKptzRightUp,
    HKptzRightUp1,
    HKptzRightUpEnd1,
    HKptzUp,
    HKptzUp1,
    HKptzUpEnd1,
    HKstartVideo,
    HKtiming,
    HKwatermark,
    HKzoomAdd,
    HKzoomAdd1,
    HKzoomAddEnd1,
    HKzoomDec,
    HKzoomDec1,
    HKzoomDecEnd1
  } from "@/api/robot/camera/hkvideo/video";
  let myChart = null;
  let myChart1 = null;
  let myChart2 = null;
  export default {
    data() {
      return {
        OnlineArry1: [],
        OnlineArry2: [],
        time: null,
        //时间戳
        mousedownTime: 0,
        mouseupTime: 0,
        //云台是否结束
        flag: true,
        //是否展示视频
        videoShowQ: false,
        videoShowH: false,
        timer: null,//定时器
        //切换不同的云台,默认显示大华
        camera_type: localStorage.getItem("camera_type") == "" ? 0 : localStorage.getItem("camera_type"),
        //切换不同云台
        Qyt: true,
        Hyt: false,
        //大华前摄像头服务
        webRtcServer: null,
        //大华后摄像头服务
        webRtcServer1: null,
        //设置下拉按钮初始显示内容
        sxtjs: '摄像校时',
        sxtcks: "2窗口",
        //点击视频窗口切换选中标识
        robot_name: undefined,
        activeBox: 1,  //标识被选中
        //控制点击救援增加的按钮
        showButtons: false,
        //控制模式板块的切换(表示默认显示第一个内容)
        selectedTab: 0,
        //控制机器人的滚动条
        isDologin: false,
        input: '',
        robot_name_title: undefined, //机器人名称标题
        sdmssdzd: 1000,//手动模式速度设定
        zdmssdzd: 1000,//自动模式速度设定
        zymssdzd: 1000,//自由模式速度设定
        xcwd: "无",//现场温度
        xcsd: "无",//现场湿度
        dcdy:"无",//电池电压
        jqrms: "无",//机器人模式
        jqrfx: "无",//机器人方向
        gswl: '无', //格栅设定数量
        jcgssl: '无',//检测格栅孔数量
        jqrsd: '无',//机器人速度设定
        sswy: "无",//实时位移
        dczt: '无',//电池状态
        queryParams: {
          robot_name: undefined //机器人名称
        }, queryParams1: {
          robot_config_id: undefined
        },queryParams2: {
          robotid: undefined
        },//查询参数
        queryparms3: {
          robotid: undefined,
          valu: undefined,
          robot_ip: undefined,
          robot_port: undefined,
          plcip: undefined,
          plcport: undefined,
          video_ip1: undefined,
          video_name1: undefined,
          video_pwd1: undefined,
          video_port1: undefined,
          residence_time: undefined,
          plcid: undefined,
          video_ip2: undefined,
          video_name2: undefined,
          video_pwd2: undefined,
          video_port2: undefined,
        }, //摄像头参数
        queryparms4: {
          valu: undefined,
          //camera_type:localStorage.getItem("camera_type"),
          video_ip1: localStorage.getItem("video_ip1"),
          video_name1: localStorage.getItem("video_name1"),
          video_pwd1: localStorage.getItem("video_pwd1"),
          video_port1: localStorage.getItem("video_port1"),
          residence_time: undefined,
          video_ip2: localStorage.getItem("video_ip2"),
          video_name2: localStorage.getItem("video_name2"),
          video_pwd2: localStorage.getItem("video_pwd2"),
          video_port2: localStorage.getItem("video_port2"),
          robot_config_id: localStorage.getItem("robot_config_id"),
        },
        //机器人列表
        robotList: [],
        //plc列表
        plcList: [],
        //online列表
        onlineList: [],
      }
    },
    created() {
      //初始化页面加载方法
      this.getList();//机器人列表
      this.getplcs();//机器人id查询plc列表
     // this.getISadmin();//当前用户是否管理员
      this.echarts1(0);//电机转速
      this.echarts2(0);//电机温度
      this.echarts3(0);//电池电量
    },
    mounted() {
      //加载完页面加载方法
      //机器人标题
      $("#robotitle").text(localStorage.getItem("robot_name") == null ? "机器人" : localStorage.getItem("robot_name"));
      localStorage.getItem("robotype") === '1' ? this.showButtons = true : this.showButtons = false;//是否显示脱钩、放钩按钮
      //定时轮询执行
      this.timer = setInterval(() => {
        this.getList();//机器人列表
        this.getplcs();//根据机器人ID查询plc列表
        this.robotdata();//机器人实时数据
        console.log("机器人控制页面定时")
      }, 2000);//2秒
      this.spbf(localStorage.getItem("camera_type")); //挂在完成后播放当前的监控视频 摄像头播放
      this.getQOnlie();//摄像头在线离线状态
    },
    methods: {
      spbf(camera_type) {
        //====大华摄像头======
        if (camera_type == 0) {
          //大华前摄像头
          if (localStorage.getItem("video_ip1") != null && localStorage.getItem("video_ip1") != "") {
            //检测摄像头ip通不通
            ippingCmd(localStorage.getItem("video_ip1")).then(response => {
              if (typeof (response.data.data) != 'undefined' && response.data.data != null && response.data.data == true) {
                this.webRtcServer = new WebRtcStreamer('DHQvideo', location.protocol + '//127.0.0.1:8000')
                this.webRtcServer.connect('rtsp://' + localStorage.getItem("video_name1") + ':' + localStorage.getItem("video_pwd1") + '@' + localStorage.getItem("video_ip1") + ':' + 554 + '/cam/realmonitor?channel=1&subtype=0')
                this.videoShowQ = true
              } else {
                this.videoShowQ = false//如果ip密码账户名不存在则隐藏前摄像头
              }
            });
          } else {
            this.videoShowQ = false//如果ip密码账户名不存在则隐藏前摄像头
          }//大华后摄像头
          if (localStorage.getItem("video_ip2") != null && localStorage.getItem("video_ip2") != "") {
            //检测摄像头ip通不通
            ippingCmd(localStorage.getItem("video_ip2")).then(response => {
              if (typeof (response.data.data) != 'undefined' && response.data.data != null && response.data.data == true) {
                this.webRtcServer1 = new WebRtcStreamer('DHHvideo', location.protocol + '//127.0.0.1:8000')
                this.webRtcServer1.connect('rtsp://' + localStorage.getItem("video_name2") + ':' + localStorage.getItem("video_pwd2") + '@' + localStorage.getItem("video_ip2") + ':' + 554 + '/cam/realmonitor?channel=1&subtype=0')
                this.videoShowH = true
              } else {
                this.videoShowH = false
              }
            });
          } else {
            this.videoShowH = false
          }
        } //=====吊舱前摄像头======
        else if (camera_type == 2) {
          //吊舱前摄像头
          if (localStorage.getItem("video_ip1") != null && localStorage.getItem("video_ip1") != "") {
            //检测摄像头ip通不通
            ippingCmd(localStorage.getItem("video_ip1")).then(response => {
              if (typeof (response.data.data) != 'undefined' && response.data.data != null && response.data.data == true) {
                this.webRtcServer = new WebRtcStreamer('DCQvideo', location.protocol + '//127.0.0.1:8000')
                this.webRtcServer.connect('rtsp://' + localStorage.getItem("video_ip1") + ':' + 554 + '/stream=0')
                this.videoShowQ = true
              } else {
                this.videoShowQ = false//如果ip不存在则隐藏摄像头
              }
            });
          } else {
            this.videoShowQ = false//如果ip不存在则隐藏摄像头
          } //吊舱后摄像头
          if (localStorage.getItem("video_ip2") != null && localStorage.getItem("video_ip2") != "") {
            //检测摄像头ip通不通
            ippingCmd(localStorage.getItem("video_ip2")).then(response => {
              if (typeof (response.data.data) != 'undefined' && response.data.data != null && response.data.data == true) {
                this.webRtcServer1 = new WebRtcStreamer('DCHvideo', location.protocol + '//127.0.0.1:8000')
                this.webRtcServer1.connect('rtsp://' + localStorage.getItem("video_ip2") + ':' + 554 + '/stream=0')
                this.videoShowH = true
              } else {
                this.videoShowH = false
              }
            });
          } else {
            this.videoShowH = false
          }
        }//=====海康摄像头======
        else if (camera_type == 1) {
          if (localStorage.getItem("video_ip1") != null && localStorage.getItem("video_ip1") != "") {
            //检测摄像头ip通不通
            ippingCmd(localStorage.getItem("video_ip1")).then(response => {
              if (typeof (response.data.data) != 'undefined' && response.data.data != null && response.data.data == true) {
                this.webRtcServer = new WebRtcStreamer('HKvideo', location.protocol + '//127.0.0.1:8000')
                this.webRtcServer.connect('rtsp://' + localStorage.getItem("video_ip1") + ':' + 554 + '/stream=0')
                this.videoShowQ = true
              } else {
                this.videoShowQ = false//如果ip不存在则隐藏摄像头
              }
            });
          } else {
            this.videoShowQ = false//如果ip不存在则隐藏摄像头
          }
        }
      },//当前用户是否管理员
      // getISadmin() {
      //   isadminCmd().then(response => {
      //     if (typeof response.data != "undefined" && response.data != null) {
      //       if (response.data == true) {
      //         $("#zymsid").show();
      //       } else {
      //         $("#zymsid").hide();
      //       }
      //     }
      //   });
      // },//手动模式速度设定
      sdmslb(sdmssdzd) {
        this.sdmssdzd = sdmssdzd;
      },//自动模式速度设定
      zdmslb(zdmssdzd) {
        this.zdmssdzd = zdmssdzd;
      },//自由模式速度设定
      zymslb(zymssdzd) {
        this.zymssdzd = zymssdzd;
      },//摄像头设置
      sxtxz(sxtjs) {
        this.sxtjs = sxtjs;
      },//摄像头窗口
      sxtck(sxtcks) {
        this.sxtcks = sxtcks;
      },//获取当前机器人数据
      handleSelectionChange(row) {
        //摄像头相关
        if (this.webRtcServer != null) {
          this.webRtcServer.disconnect();
          this.webRtcServer = null
        }
        if (this.webRtcServer1 != null) {
          this.webRtcServer1.disconnect();
          this.webRtcServer1 = null
        }
        localStorage.removeItem("robot_config_id");//删除机器人id
        localStorage.removeItem("robot_name");//删除机器人名称
        localStorage.removeItem("video_ip1");//删除1摄像头ip
        localStorage.removeItem("video_port1");//删除1摄像头端口
        localStorage.removeItem("video_name1");//删除1摄像头账号
        localStorage.removeItem("video_pwd1");//删除1摄像头密码
        localStorage.removeItem("video_ip2");//删除2摄像头ip
        localStorage.removeItem("video_port2");//删除2摄像头端口号
        localStorage.removeItem("video_name2");//删除2摄像头账号
        localStorage.removeItem("video_pwd2");//删除2摄像头密码
        localStorage.removeItem("robotype");//删除机器人类型
        localStorage.removeItem("camera_type");//删除摄像头类型
        localStorage.setItem("video_ip1", row.video_ip1);//存储值
        localStorage.setItem("video_port1", row.video_port1);//存储值
        localStorage.setItem("video_name1", row.video_name1);//存储值
        localStorage.setItem("video_pwd1", row.video_pwd1);//存储值
        localStorage.setItem("video_ip2", row.video_ip2);//存储值
        localStorage.setItem("video_port2", row.video_port2);//存储值
        localStorage.setItem("video_name2", row.video_name2);//存储值
        localStorage.setItem("video_pwd2", row.video_pwd2);//存储值
        localStorage.setItem("robot_name", row.robot_name);//存储值
        localStorage.setItem("robot_config_id", row.id);//存储值
        localStorage.setItem("robotype", row.robot_type);//存储值
        localStorage.setItem("camera_type", row.camera_type);//存储摄像头类型
        //摄像头参数
        this.queryparms4.video_ip1 = localStorage.getItem("video_ip1");
        this.queryparms4.video_name1 = localStorage.getItem("video_name1");
        this.queryparms4.video_pwd1 = localStorage.getItem("video_pwd1");
        this.queryparms4.video_port1 = localStorage.getItem("video_port1");
        this.queryparms4.video_ip2 = localStorage.getItem("video_ip2");
        this.queryparms4.video_name2 = localStorage.getItem("video_name2");
        this.queryparms4.video_pwd2 = localStorage.getItem("video_pwd2");
        this.queryparms4.video_port2 = localStorage.getItem("video_port2");
        this.queryparms4.robot_config_id = localStorage.getItem("robot_config_id");
        //将点击后存储的camera_type值赋值给data中的
        this.camera_type = localStorage.getItem("camera_type")
        //机器人名称标题
        $("#robotitle").text(localStorage.getItem("robot_name"));
        //是否显示脱钩、放钩按钮
        localStorage.getItem("robotype") === '1' ? this.showButtons = true : this.showButtons = false;
        this.getplcs();//根据机器人id查询plc列表
        this.spbf(localStorage.getItem("camera_type"));//摄像头视频播放
        this.getQOnlie(); //摄像头状态
      }, //获取摄像头在线或离线
      getQOnlie() {
        //====== 大华摄像头==========
        if (this.camera_type == 0) {
          if (localStorage.getItem("video_ip1") != null
            && localStorage.getItem("video_ip1") != ""
            && localStorage.getItem("video_ip2") != null
            && localStorage.getItem("video_ip2") != ""
            && localStorage.getItem("video_name1") != null
            && localStorage.getItem("video_name1") != ""
            && localStorage.getItem("video_name2") != null
            && localStorage.getItem("video_name2") != ""
            && localStorage.getItem("video_pwd1") != null
            && localStorage.getItem("video_pwd1") != ""
            && localStorage.getItem("video_pwd2") != null
            && localStorage.getItem("video_pwd2") != ""
            && localStorage.getItem("video_port1") != null
            && localStorage.getItem("video_port1") != ""
            && localStorage.getItem("video_port2") != null
            && localStorage.getItem("video_port2") != ""
          ) {
            this.queryparms4.robot_config_id = localStorage.getItem("robot_config_id");
            onLineStatus(this.queryparms4).then(response => {
              this.OnlineArry1 = response.data[0];
              this.OnlineArry2 = response.data[1];
              this.onlineList = [...this.OnlineArry1, ...this.OnlineArry2]
              // this.onlineList = OnlineArry1.connect(OnlineArry2)
              // this.onlineList.forEach((item) => {
              //   this.onlineList = item
              // });
            });
          } else {
            this.$modal.msg("大华摄像头账号为空")
          }
        } else {
          this.onlineList = null
        }
        //====== 吊舱摄像头==========
        if (this.camera_type == 2) {
          this.queryparms4.robot_config_id = localStorage.getItem("robot_config_id");
          if (localStorage.getItem("video_ip1") != null && localStorage.getItem("video_ip1") != "") {
            onLineStatus(this.queryparms4).then(response => {
              this.OnlineArry1 = response.data[0];
              this.OnlineArry2 = response.data[1];
              this.onlineList = [...this.OnlineArry1, ...this.OnlineArry2]
            });
          } else {
            this.$modal.msg("吊舱摄像头账号为空")
          }
        } else {
          this.onlineList = null
        }
        //====== 海康摄像头==========
        if (this.camera_type == 1) {
          if (localStorage.getItem("video_ip1") != null
            && localStorage.getItem("video_ip1") != ""
            && localStorage.getItem("video_name1") != null
            && localStorage.getItem("video_name1") != ""
            && localStorage.getItem("video_pwd1") != null
            && localStorage.getItem("video_pwd1") != ""
            && localStorage.getItem("video_port1") != null
            && localStorage.getItem("video_port1") != ""
          ) {
            this.queryparms4.robot_config_id = localStorage.getItem("robot_config_id");
            onLineStatus(this.queryparms4).then(response => {
              this.OnlineArry1 = response.data[0];
              this.OnlineArry2 = response.data[1];
              this.onlineList = [...this.OnlineArry1, ...this.OnlineArry2]
            });
          } else {
            this.$modal.msg("海康摄像头账号为空")
          }
        } else {
          this.onlineList = null
        }
      },//根据机器人id查询plc列表
      getplcs() {
        this.queryParams1.robot_config_id = localStorage.getItem("robot_config_id");
        listsPlc(this.queryParams1).then(response => {
          this.plcList = response.rows;
        });
      },//根据输入框机器人名称，查询机器人列表
      getRobotName(robot_name) {
        this.queryParams.robot_name = robot_name;
        this.getList();
      },//查询机器人列表
      getList() {
        this.loading = true;
        listonPageRobotConfig(this.queryParams).then(response => {
          this.robotList = response.rows;
        });
      },//定时查询机器人数据
      robotdata() {
        this.queryParams2.robotid = localStorage.getItem("robot_config_id");
        jqrdataCmd(this.queryParams2).then(response => {
          if (typeof response.data != "undefined" && response.data != null) {
            this.xcsd = response.data.xcsd + "%LEL";//现场湿度
            this.xcwd = response.data.xcwd + "°C"; //现场温度
            this.dcdy = response.data.dcdy; //电池电压
            this.jqrms = response.data.jqrms; //机器人模式
            this.jqrfx = response.data.jqrfx; //机器人方向
            this.gswl = response.data.gswl;//格栅设定数量
            this.jcgssl =response.data.jcgssl; //检测格栅孔数量
            this.jqrsd =response.data.jqrsd + "r/min";//机器人速度设定
            this.sswy =response.data.sswy + "m";//实时位移
            this.dczt = response.data.dczt; //电池状态
            this.echarts1(response.data.djzs==""?0:response.data.djzs);//电机转速
            this.echarts2(response.data.djwd==""?0:response.data.djwd);//电机温度
            this.echarts3(response.data.dcdl==""?0:response.data.dcdl);//电池电量
          } else {
            this.xcsd = "无";//现场湿度
            this.xcwd = "无"; //现场温度
            this.dcdy = "无"; //电池电压
            this.jqrms = "无"; //机器人模式
            this.jqrfx = "无"; //机器人方向
            this.gswl = "无";//格栅设定数量
            this.jcgssl = "无"; //检测格栅孔数量
            this.jqrsd = "无";//机器人速度设定
            this.sswy = "无";//实时位移
            this.dczt = "无"; //电池状态
            this.echarts1(0);//电机转速
            this.echarts2(0);//电机温度
            this.echarts3(0);//电池电量
          }
        });
      },
      ///////////////////////////机器人控制/////////////////////////////
      //机器人模式设置
      jqrmsF(jqrms) {
        this.queryparms3.valu = jqrms
        console.log("机器人模式设置" + this.queryparms3.valu);
        if (this.queryparms3.valu != "") {
          this.queryparms3.robotid = localStorage.getItem("robot_config_id");
          msszCmd(this.queryparms3).then(response => {
            if (typeof (response) != null) this.$modal.msg(response.msg);
          });
        } else {
          this.$modal.msgError("机器人模式设置不能为空")
        }
      },//机器人自由模式设置
      jqrzymsF(jqrms) {
        this.queryparms3.valu = jqrms
        console.log("机器人模式设置" + this.queryparms3.valu);
        if (this.queryparms3.valu != "") {
          this.queryparms3.robotid = localStorage.getItem("robot_config_id");
          zymsmsszCmd(this.queryparms3).then(response => {
            if (typeof (response) != null) this.$modal.msg(response.msg);
          });
        } else {
          this.$modal.msgError("机器人模式设置不能为空")
        }
      },//目标位置
      mbwz() {
        this.queryparms3.valu = $("#mbwzid").text();
        console.log("目标位置" + this.queryparms3.valu);
        if (this.queryparms3.valu != "") {
          this.queryparms3.robotid = localStorage.getItem("robot_config_id");
          mbwzCmd(this.queryparms3).then(response => {
            if (typeof (response) != null) this.$modal.msg(response.msg);
          });
        } else {
          this.$modal.msgError("目标位置不能为空")
        }
      },//手动模式速度设置
      sdmsdsd() {
        this.queryparms3.valu = this.sdmssdzd;
        console.log("手动模式速度设置" + this.sdmssdzd);
        if (this.queryparms3.valu != "") {
          this.queryparms3.robotid = localStorage.getItem("robot_config_id");
          jqrsdCmd(this.queryparms3).then(response => {
            if (typeof (response) != null) this.$modal.msg(response.msg);
          });
        } else {
          this.$modal.msgError("手动模式速度设置不能为空")
        }
      },//自动模式速度设置
      zdmsdsd() {
        this.queryparms3.valu = this.zdmssdzd;
        console.log("自动模式速度设置" + this.zdmssdzd);
        if (this.queryparms3.valu != "") {
          this.queryparms3.robotid = localStorage.getItem("robot_config_id");
          xjsdCmd(this.queryparms3).then(response => {
            if (typeof (response) != null) this.$modal.msg(response.msg);
          });
        } else {
          this.$modal.msgError("自动模式速度设置不能为空")
        }
      },//自由模式速度设置
      zymsdsd() {
        this.queryparms3.valu = this.zymssdzd;
        console.log("自由模式速度设置" + this.zymssdzd);
        if (this.queryparms3.valu != "") {
          this.queryparms3.robotid = localStorage.getItem("robot_config_id");
          jqrsdzymsCmd(this.queryparms3).then(response => {
            if (typeof (response) != null) this.$modal.msg(response.msg);
          });
        } else {
          this.$modal.msgError("自由模式速度设置不能为空")
        }
      },//手动模式前进
      sdmsqj() {
        this.queryparms3.robotid = localStorage.getItem("robot_config_id");
        qjCmd(this.queryparms3).then(response => {
          if (typeof (response) != null) this.$modal.msg(response.msg);
        });
      }, //手动模式后退
      sdmsht() {
        this.queryparms3.robotid = localStorage.getItem("robot_config_id");
        htCmd(this.queryparms3).then(response => {
          if (typeof (response) != null) this.$modal.msg(response.msg);
        });
      }, //手动模式(启动)
      sdmsqd() {
        this.queryparms3.robotid = localStorage.getItem("robot_config_id");
        robotrunCmd(this.queryparms3).then(response => {
          if (typeof (response) != null) this.$modal.msg(response.msg);
        });
      },//自动模式(启动)
      zdmsqd() {
        this.queryparms3.robotid = localStorage.getItem("robot_config_id");
        zdqdCmd(this.queryparms3).then(response => {
          if (typeof (response) != null) this.$modal.msg(response.msg);
        });
      },//自由模式(启动)
      zymsqd() {
        this.queryparms3.robotid = localStorage.getItem("robot_config_id");
        zymsrobotrunCmd(this.queryparms3).then(response => {
          if (typeof (response) != null) this.$modal.msg(response.msg);
        });
      },//定点视频
      dd() {
        this.queryparms3.robotid = localStorage.getItem("robot_config_id");
        ddspCmd(this.queryparms3).then(response => {
          if (typeof (response) != null) this.$modal.msg(response.msg);
        });
      },//连续视频
      lx() {
        this.queryparms3.robotid = localStorage.getItem("robot_config_id");
        lxspCmd(this.queryparms3).then(response => {
          if (typeof (response) != null) this.$modal.msg(response.msg);
        });
      }, //一键返航
      yjfh() {
        this.queryparms3.robotid = localStorage.getItem("robot_config_id");
        yjfhCmd(this.queryparms3).then(response => {
          if (typeof (response) != null) this.$modal.msg(response.msg);
        });
      },//放钩
      fg() {
        this.queryparms3.robotid = localStorage.getItem("robot_config_id");
        fgCmd(this.queryparms3).then(response => {
          if (typeof (response) != null) this.$modal.msg(response.msg);
        });
      }, //收钩
      sg() {
        this.queryparms3.robotid = localStorage.getItem("robot_config_id");
        sgCmd(this.queryparms3).then(response => {
          if (typeof (response) != null) this.$modal.msg(response.msg);
        });
      },//自由模式前进
      zymsqj() {
        this.queryparms3.robotid = localStorage.getItem("robot_config_id");
        zymsqjCmd(this.queryparms3).then(response => {
          if (typeof (response) != null) this.$modal.msg(response.msg);
        });
      }, //自由模式后退
      zymsht() {
        this.queryparms3.robotid = localStorage.getItem("robot_config_id");
        zymshtCmd(this.queryparms3).then(response => {
          if (typeof (response) != null) this.$modal.msg(response.msg);
        });
      }, //机器人暂停
      zt() {
        this.queryparms3.robotid = localStorage.getItem("robot_config_id");
        robotstopCmd(this.queryparms3).then(response => {
          if (typeof (response) != null) this.$modal.msg(response.msg);
        });
      },//点击左侧第一个列表中的救援增加两个按钮
      handleJyClick() {
        this.showButtons = true
      },//点击左侧第一个列表中的普通隐藏两个按钮
      handlePtClick() {
        this.showButtons = false
      },
      /////////////////////大华摄像头////////////////////////
      //前-手动录像开始
      QstartVideo() {
        QstartVideo(this.queryparms4).then(response => {
          if (typeof (response) != null) this.$modal.msg(response.msg);
        });
      },//前-手动停止录视频
      QendVideo() {
        QendVideo().then(response => {
          if (typeof (response) != null) this.$modal.msg(response.msg);
        });
      }, //校时
      Qtiming() {
        Qtiming(this.queryparms4).then(response => {
          if (typeof (response) != null) this.$modal.msg(response.msg);
        });
      }, //水印
      Qwatermark() {
        this.queryparms4.valu = $("#sy").text();
        const value = this.queryparms4.valu
        if (value === '') {
          this.$modal.msg('摄像头水印不能为空')
        } else {
          Qwatermark(this.queryparms4).then(response => {
            if (typeof (response) != null) this.$modal.msg(response.msg);
          });
        }
      },//前-上-点击
      startQUpRunning: _.throttle(function (event) {
        console.log("前向上点击事件")
        if (this.mouseupTime - this.mousedownTime < 1050) {
          QptzUp(this.queryparms4).then(response => {
            if (response.msg != null) {
              this.$modal.msg(response.msg);
            } else {
            }
          });
        }
      }, 1000),
      //前-上-长按
      startQUpRunning1() {
        console.log("前向上长按事件")
        this.mousedownTime = new Date().getTime()
        this.timer = setInterval(() => {
          QptzUp1(this.queryparms4).then(response => {
            //   if (typeof (response) != null) {
            //
            // }else{
            //   this.$modal.msg(response.msg);
            // }
          });
        }, 500)
      },
      stopQUpRunning1() {
        this.mouseupTime = new Date().getTime()
        clearInterval(this.timer)
        //鼠标抬起结束向上
        QptzUpEnd1(this.queryparms4).then(response => {
          //this.$modal.msg(response.msg);
        })
      },
      //前----下
      startQDwnRunning: _.throttle(function (event) {
        console.log("前向下点击事件")
        if (this.mouseupTime - this.mousedownTime < 1050) {
          QptzDown(this.queryparms4).then(response => {
            if (response.msg != null) {
              this.$modal.msg(response.msg);
            } else {
            }
          });
        }
      }, 1000),
      startQDwnRunning1() {
        console.log("前向下长按事件")
        this.mousedownTime = new Date().getTime()
        this.timer = setInterval(() => {
          QptzDown1(this.queryparms4).then(response => {
            // if (typeof (response) != null) {
            //
            // }else{
            //   this.$modal.msg(response.msg);
            // }
          });
        }, 500)
      },
      stopQDwnRunning1() {
        this.mouseupTime = new Date().getTime()
        clearInterval(this.timer)
        //鼠标抬起结束向上
        QptzDownEnd1(this.queryparms4).then(response => {
          //this.$modal.msg(response.msg);
        })
      },
      //前----左
      startQLeftRunning: _.throttle(function (event) {
        console.log("前向左点击事件")
        if (this.mouseupTime - this.mousedownTime < 1050) {
          QptzLeft(this.queryparms4).then(response => {
            if (response.msg != null) {
              this.$modal.msg(response.msg);
            } else {
            }
          });
        }
      }, 1000),
      startQLeftRunning1() {
        console.log("前向左长按事件")
        this.mousedownTime = new Date().getTime()
        this.timer = setInterval(() => {
          QptzLeft1(this.queryparms4).then(response => {
            //   if (typeof (response) != null) {
            //
            // }else{
            //   this.$modal.msg(response.msg);
            // }
          });
        }, 500)
      },
      stopQLeftRunning1() {
        this.mouseupTime = new Date().getTime()
        clearInterval(this.timer)
        QptzLeftEnd1(this.queryparms4).then(response => {
          //this.$modal.msg(response.msg);
        })
      },
      //前------向右
      startQRighttRunning: _.throttle(function (event) {
        console.log("前向右点击事件")
        if (this.mouseupTime - this.mousedownTime < 1050) {
          QptzRight(this.queryparms4).then(response => {
            if (response.msg != null) {
              this.$modal.msg(response.msg);
            } else {
            }
          });
        }
      }, 1000),
      startQRighttRunning1() {
        console.log("前向右长按事件")
        this.mousedownTime = new Date().getTime()
        this.timer = setInterval(() => {
          QptzRight1(this.queryparms4).then(response => {
            //   if (typeof (response) != null) {
            //
            // }else{
            //   this.$modal.msg(response.msg);
            // }
          });
        }, 500)
      },
      stopQRightRunning1() {
        this.mouseupTime = new Date().getTime()
        clearInterval(this.timer)
        QptzRightEnd1(this.queryparms4).then(response => {
          //this.$modal.msg(response.msg);
        })
      },
      //前-拍照
      Qpicture() {
        Qpicture(this.queryparms4).then(response => {
          if (typeof (response) != null) this.$modal.msg(response.msg);
        });
      },
      //左上点击
      startQLUpRunning: _.throttle(function (event) {
        if (this.mouseupTime - this.mousedownTime < 1050) {
          //云台向左上开始
          QptzLeftUp(this.queryparms4).then(response => {
            if (typeof (response) != null) {
              if (response.msg != null) {
                this.$modal.msg(response.msg);
              } else {
              }
            }
          });
        }
      }, 1000),
      //左上长按
      startQLUpRunning1() {
        this.mousedownTime = new Date().getTime()
        this.timer = setInterval(() => {
          //云台向左上开始
          QptzLeftUp1(this.queryparms4).then(response => {
            if (typeof (response) != null) {
              //   if (typeof (response) != null) {
              //
              // }else{
              //   this.$modal.msg(response.msg);
              // }
            }
          });
        }, 500)
      },
      stopQLUpRunning1() {
        this.mouseupTime = new Date().getTime()
        clearInterval(this.timer)
        //鼠标抬起左上结束
        QptzLeftUpEnd1(this.queryparms4).then(response => {
          if (typeof (response) != null) {
            //this.$modal.msg(response.msg);
          }
        });
      },
      //右上点击
      startQRUpRunning: _.throttle(function (event) {
        if (this.mouseupTime - this.mousedownTime < 1050) {
          //云台向右上开始
          QptzRightUp(this.queryparms4).then(response => {
            if (typeof (response) != null) {
              if (response.msg != null) {
                this.$modal.msg(response.msg);
              } else {
              }
            }
          });
        }
      }, 1000),
      //右上长按
      startQRUpRunning1() {
        this.mousedownTime = new Date().getTime()
        this.timer = setInterval(() => {
          //云台向右上开始
          QptzRightUp1(this.queryparms4).then(response => {
            //   if (typeof (response) != null) {
            //
            // }else{
            //   this.$modal.msg(response.msg);
            // }
          });
        }, 500)
      },
      stopQRUpRunning1() {
        this.mouseupTime = new Date().getTime()
        clearInterval(this.timer)
        //鼠标抬起右上结束
        QptzRightUpEnd1(this.queryparms4).then(response => {
          // if (typeof (response) != null) {
          //   this.$modal.msg(response.msg);
          // }
        });
      },
      //左下点击
      startQLDwnRunning: _.throttle(function (event) {
        if (this.mouseupTime - this.mousedownTime < 1050) {
          QptzLeftDown(this.queryparms4).then(response => {
            if (response.msg != null) {
              this.$modal.msg(response.msg);
            } else {
            }
          });
        }
      }, 1000),
      //左下长按开始
      startQLDwnRunning1() {
        this.mousedownTime = new Date().getTime()
        this.timer = setInterval(() => {
          //云台向右上开始
          QptzLeftDown1(this.queryparms4).then(response => {
            //   if (typeof (response) != null) {
            //
            // }else{
            //   this.$modal.msg(response.msg);
            // }
          });
        }, 500)
      },
      //左下长按结束
      stopQLDwnRunning1() {
        this.mouseupTime = new Date().getTime()
        clearInterval(this.timer)
        //鼠标抬起左下结束
        QptzLeftDownEnd1(this.queryparms4).then(response => {
          // if (typeof (response) != null) {
          //   this.$modal.msg(response.msg);
          // }
        });
      },
      //右下点击
      startQRDwnRunning: _.throttle(function (event) {
        if (this.mouseupTime - this.mousedownTime < 1050) {
          QptzRightDown(this.queryparms4).then(response => {
            if (response.msg != null) {
              this.$modal.msg(response.msg);
            } else {
            }
          });
        }
      }, 1000),
      //右下长按开始
      startQRDwnRunning1() {
        this.mousedownTime = new Date().getTime()
        this.timer = setInterval(() => {
          //云台向右上开始
          QptzRightDown1(this.queryparms4).then(response => {
            //   if (typeof (response) != null) {
            //
            // }else{
            //   this.$modal.msg(response.msg);
            // }
          });
        }, 500)
      },
      //右下长按结束
      stopQRDwnRunning1() {
        this.mouseupTime = new Date().getTime()
        clearInterval(this.timer)
        //鼠标抬起右上结束
        QptzRightDownEnd1(this.queryparms4).then(response => {
          // if (typeof (response) != null) {
          //   this.$modal.msg(response.msg);
          // }
        });
      },
      //云台变倍-
      BbjClick: _.throttle(function () {
        if (this.mouseupTime - this.mousedownTime < 1050) {
          QzoomDec(this.queryparms4).then(response => {
            if (response.msg != null) {
              this.$modal.msg(response.msg);
            } else {
            }
          });
        }
      }, 1000),
      BbjClick1() {
        this.mousedownTime = new Date().getTime()
        this.timer = setInterval(() => {
          QzoomDec1(this.queryparms4).then(response => {
            //   if (typeof (response) != null) {
            //
            // }else{
            //   this.$modal.msg(response.msg);
            // }
          });
        }, 500)
      },
      onLongBbj1() {
        this.mouseupTime = new Date().getTime()
        clearInterval(this.timer)
        QzoomDecEnd1(this.queryparms4).then(response => {
          // if (typeof (response) != null) {
          //   this.$modal.msg(response.msg);
          // }
        });
      },
      //云台变倍+ 开始
      BbAddClick: _.throttle(function () {
        if (this.mouseupTime - this.mousedownTime < 1050) {
          QzoomAdd(this.queryparms4).then(response => {
            if (response.msg != null) {
              this.$modal.msg(response.msg);
            } else {
            }
          });
        }
      }, 1000),
      BbAddClick1() {
        this.mousedownTime = new Date().getTime()
        this.timer = setInterval(() => {
          QzoomAdd1(this.queryparms4).then(response => {
            //   if (typeof (response) != null) {
            //
            // }else{
            //   this.$modal.msg(response.msg);
            // }
          });
        }, 500)
      },
      onLongAdd1() {
        this.mouseupTime = new Date().getTime()
        clearInterval(this.timer)
        QzoomAddEnd1(this.queryparms4).then(response => {
          // if (typeof (response) != null) {
          //   this.$modal.msg(response.msg);
          // }
        });
      },
      //云台变焦+ 开始
      startBjAddRunning: _.throttle(function () {
        if (this.mouseupTime - this.mousedownTime < 1050) {
          QfocusAdd(this.queryparms4).then(response => {
            if (response.msg != null) {
              this.$modal.msg(response.msg);
            } else {
            }
          });
        }
      }, 1000),
      startBjAddRunning1() {
        this.mousedownTime = new Date().getTime()
        this.timer = setInterval(() => {
          QfocusAdd1(this.queryparms4).then(response => {
            //   if (typeof (response) != null) {
            //
            // }else{
            //   this.$modal.msg(response.msg);
            // }
          });
        }, 500)
      },
      stopBjAddRunning1() {
        this.mouseupTime = new Date().getTime()
        clearInterval(this.timer)
        QfocusAddEnd1(this.queryparms4).then(response => {
          // if (typeof (response) != null) {
          //   this.$modal.msg(response.msg);
          // }
        });
      },
      //云台变焦- 开始
      startBjjRunning: _.throttle(function () {
        if (this.mouseupTime - this.mousedownTime < 1050) {
          QfocusDec(this.queryparms4).then(response => {
            if (response.msg != null) {
              this.$modal.msg(response.msg);
            } else {
            }
          });
        }
      }, 1000),
      startBjjRunning1() {
        this.mousedownTime = new Date().getTime()
        this.timer = setInterval(() => {
          QfocusDec1(this.queryparms4).then(response => {
            //   if (typeof (response) != null) {
            //
            // }else{
            //   this.$modal.msg(response.msg);
            // }
          });
        }, 500)
      },
      stopBjjRunning1() {
        this.mouseupTime = new Date().getTime()
        clearInterval(this.timer)
        QfocusDecEnd1(this.queryparms4).then(response => {
          // if (typeof (response) != null) {
          //   this.$modal.msg(response.msg);
          // }
        });
      },
      //云台光圈+ 开始
      startGqAddRunning: _.throttle(function () {
        if (this.mouseupTime - this.mousedownTime < 1050) {
          QirisAdd(this.queryparms4).then(response => {
            if (response.msg != null) {
              this.$modal.msg(response.msg);
            } else {
            }
          });
        }
      }, 1000),
      startGqAddRunning1() {
        this.mousedownTime = new Date().getTime()
        this.timer = setInterval(() => {
          QirisAdd1(this.queryparms4).then(response => {
            //   if (typeof (response) != null) {
            //
            // }else{
            //   this.$modal.msg(response.msg);
            // }
          });
        }, 500)
      },
      stopGqAddRunning1() {
        this.mouseupTime = new Date().getTime()
        clearInterval(this.timer)
        QirisAddEnd1(this.queryparms4).then(response => {
          // if (typeof (response) != null) {
          //   this.$modal.msg(response.msg);
          // }
        });
      },
      //云台光圈-开始
      startGqjRunning: _.throttle(function () {
        if (this.mouseupTime - this.mousedownTime < 1050) {
          QirisDec(this.queryparms4).then(response => {
            if (response.msg != null) {
              this.$modal.msg(response.msg);
            } else {
            }
          });
        }
      }, 1000),
      startGqjRunning1() {
        this.mousedownTime = new Date().getTime()
        this.timer = setInterval(() => {
          QirisDec1(this.queryparms4).then(response => {
            //   if (typeof (response) != null) {
            //
            // }else{
            //   this.$modal.msg(response.msg);
            // }
          });
        }, 500)
      },
      stopGqjRunning1() {
        this.mouseupTime = new Date().getTime()
        clearInterval(this.timer)
        QirisDecEnd1(this.queryparms4).then(response => {
          // if (typeof (response) != null) {
          //   this.$modal.msg(response.msg);
          // }
        });
      },
      /////大华后摄像头////
      //校时
      Htiming() {
        Htiming(this.queryparms4).then(response => {
          if (typeof (response) != null) this.$modal.msg(response.msg);
        });
      },//水印
      Hwatermark() {
        this.queryparms4.valu = $("#sy").text();
        const value = this.queryparms4.valu
        if (value === '') {
          this.$modal.msg('摄像头水印不能为空')
        } else {
          Hwatermark(this.queryparms4).then(response => {
            if (typeof (response) != null) this.$modal.msg(response.msg);
          });
        }
      },//手动录像开始
      HstartVideo() {
        HstartVideo(this.queryparms4).then(response => {
          if (typeof (response) != null) this.$modal.msg(response.msg);
        });
      },//手动录像停止
      HendVideo() {
        HendVideo().then(response => {
          if (typeof (response) != null) this.$modal.msg(response.msg);
        });
      },//拍照
      Hpicture() {
        Hpicture(this.queryparms4).then(response => {
          if (typeof (response) != null) {
            this.$modal.msg(response.msg);
          }
        });
      },
      //云台向上开始
      startHUpRunning: _.throttle(function () {
        if (this.mouseupTime - this.mousedownTime < 1050) {
          HptzUp(this.queryparms4).then(response => {
            if (response.msg != null) {
              this.$modal.msg(response.msg);
            } else {
            }
          });
        }
      }, 1000),
      startHUpRunning1() {
        this.mousedownTime = new Date().getTime()
        this.timer = setInterval(() => {
          HptzUp1(this.queryparms4).then(response => {
            //   if (typeof (response) != null) {
            //
            // }else{
            //   this.$modal.msg(response.msg);
            // }
          });
        }, 500)
      },
      stopHUpRunning1() {
        this.mouseupTime = new Date().getTime()
        clearInterval(this.timer)
        HptzUpEnd1(this.queryparms4).then(response => {
          // if (typeof (response) == null) {
          //   // this.$modal.msg(response.msg);
          // }
        });
      },
      //云台向下开始
      startHDwnRunning: _.throttle(function () {
        if (this.mouseupTime - this.mousedownTime < 1050) {
          HptzDown(this.queryparms4).then(response => {
            if (response.msg != null) {
              this.$modal.msg(response.msg);
            } else {
            }
          });
        }
      }, 1000),
      startHDwnRunning1() {
        this.mousedownTime = new Date().getTime()
        this.timer = setInterval(() => {
          HptzDown1(this.queryparms4).then(response => {
            //   if (typeof (response) != null) {
            //
            // }else{
            //   this.$modal.msg(response.msg);
            // }
          });
        }, 500)
      },
      stopHDwnRunning1() {
        this.mouseupTime = new Date().getTime()
        clearInterval(this.timer)
        HptzDownEnd1(this.queryparms4).then(response => {
          // if (typeof (response) != null) {
          //   this.$modal.msg(response.msg);
          // }
        });
      },
      //云台向左开始
      startHLeftRunning: _.throttle(function () {
        if (this.mouseupTime - this.mousedownTime < 1050) {
          HptzLeft(this.queryparms4).then(response => {
            if (response.msg != null) {
              this.$modal.msg(response.msg);
            } else {
            }
          });
        }
      }, 1000),
      startHLeftRunning1() {
        this.mousedownTime = new Date().getTime()
        this.timer = setInterval(() => {
          HptzLeft1(this.queryparms4).then(response => {
            //   if (typeof (response) != null) {
            //
            // }else{
            //   this.$modal.msg(response.msg);
            // }
          });
        }, 500)
      },
      stopHLeftRunning1() {
        this.mouseupTime = new Date().getTime()
        clearInterval(this.timer)
        HptzLeftEnd1(this.queryparms4).then(response => {
          // if (typeof (response) != null) {
          //   this.$modal.msg(response.msg);
          // }
        });
      },
      //云台向右开始
      startHRighttRunning: _.throttle(function () {
        if (this.mouseupTime - this.mousedownTime < 1050) {
          HptzRight(this.queryparms4).then(response => {
            if (response.msg != null) {
              this.$modal.msg(response.msg);
            } else {
            }
          });
        }
      }, 1000),
      startHRighttRunning1() {
        this.mousedownTime = new Date().getTime()
        this.timer = setInterval(() => {
          HptzRight1(this.queryparms4).then(response => {
            //   if (typeof (response) != null) {
            //
            // }else{
            //   this.$modal.msg(response.msg);
            // }
          });
        }, 500)
      },
      stopHRightRunning1() {
        this.mouseupTime = new Date().getTime()
        clearInterval(this.timer)
        HptzRightEnd1(this.queryparms4).then(response => {
          // if (typeof (response) != null) {
          //   this.$modal.msg(response.msg);
          // }
        });
      },
      //云台向左上开始
      startHLUpRunning: _.throttle(function () {
        if (this.mouseupTime - this.mousedownTime < 1050) {
          HptzLeftUp(this.queryparms4).then(response => {
            if (response.msg != null) {
              this.$modal.msg(response.msg);
            } else {
            }
          });
        }
      }, 1000),
      startHLUpRunning1() {
        this.mousedownTime = new Date().getTime()
        this.timer = setInterval(() => {
          HptzLeftUp1(this.queryparms4).then(response => {
            //   if (typeof (response) != null) {
            //
            // }else{
            //   this.$modal.msg(response.msg);
            // }
          });
        }, 500)
      },
      stopHLUpRunning1() {
        this.mouseupTime = new Date().getTime()
        clearInterval(this.timer)
        HptzLeftUpEnd1(this.queryparms4).then(response => {
          // if (typeof (response) != null) {
          //   this.$modal.msg(response.msg);
          // }
        });
      },
      //云台向右上开始
      startHRUpRunning: _.throttle(function () {
        if (this.mouseupTime - this.mousedownTime < 1050) {
          HptzRightUp(this.queryparms4).then(response => {
            if (response.msg != null) {
              this.$modal.msg(response.msg);
            } else {
            }
          });
        }
      }, 1000),
      startHRUpRunning1() {
        this.mousedownTime = new Date().getTime()
        this.timer = setInterval(() => {
          HptzRightUp1(this.queryparms4).then(response => {
            //   if (typeof (response) != null) {
            //
            // }else{
            //   this.$modal.msg(response.msg);
            // }
          });
        }, 500)
      },
      stopHRUpRunning1() {
        this.mouseupTime = new Date().getTime()
        clearInterval(this.timer)
        HptzRightUpEnd1(this.queryparms4).then(response => {
          // if (typeof (response) != null) {
          //   this.$modal.msg(response.msg);
          // }
        });
      },
      //云台向左下开始
      startHLDwnRunning: _.throttle(function () {
        if (this.mouseupTime - this.mousedownTime < 1050) {
          HptzLeftDown(this.queryparms4).then(response => {
            if (response.msg != null) {
              this.$modal.msg(response.msg);
            } else {
            }
          });
        }
      }, 1000),
      startHLDwnRunning1() {
        this.mousedownTime = new Date().getTime()
        this.timer = setInterval(() => {
          HptzLeftDown1(this.queryparms4).then(response => {
            //   if (typeof (response) != null) {
            //
            // }else{
            //   this.$modal.msg(response.msg);
            // }
          });
        }, 500)
      },
      stopHLDwnRunning1() {
        this.mouseupTime = new Date().getTime()
        clearInterval(this.timer)
        HptzLeftDownEnd1(this.queryparms4).then(response => {
          // if (typeof (response) != null) {
          //   this.$modal.msg(response.msg);
          // }
        });
      },
      //云台向右下开始
      startHRDwnRunning: _.throttle(function () {
        if (this.mouseupTime - this.mousedownTime < 1050) {
          HptzRightDown(this.queryparms4).then(response => {
            if (response.msg != null) {
              this.$modal.msg(response.msg);
            } else {
            }
          });
        }
      }, 1000),
      startHRDwnRunning1() {
        this.mousedownTime = new Date().getTime()
        this.timer = setInterval(() => {
          HptzRightDown1(this.queryparms4).then(response => {
            //   if (typeof (response) != null) {
            //
            // }else{
            //   this.$modal.msg(response.msg);
            // }
          });
        }, 500)
      },
      stopHRDwnRunning1() {
        this.mouseupTime = new Date().getTime()
        clearInterval(this.timer)
        HptzRightDownEnd1(this.queryparms4).then(response => {
          // if (typeof (response) != null) {
          //   this.$modal.msg(response.msg);
          // }
        });
      },
      //云台变倍+ 开始
      startHBbAddRunning: _.throttle(function () {
        if (this.mouseupTime - this.mousedownTime < 1050) {
          HzoomAdd(this.queryparms4).then(response => {
            if (response.msg != null) {
              this.$modal.msg(response.msg);
            } else {
            }
          });
        }
      }, 1000),
      startHBbAddRunning1() {
        this.mousedownTime = new Date().getTime()
        this.timer = setInterval(() => {
          HzoomAdd1(this.queryparms4).then(response => {
            //   if (typeof (response) != null) {
            //
            // }else{
            //   this.$modal.msg(response.msg);
            // }
          });
        }, 500)
      },
      stopHBbAddRunning1() {
        this.mouseupTime = new Date().getTime()
        clearInterval(this.timer)
        HzoomAddEnd1(this.queryparms4).then(response => {
          // if (typeof (response) != null) {
          //   this.$modal.msg(response.msg);
          // }
        });
      },
      //云台变倍- 开始
      startHBbjRunning: _.throttle(function () {
        if (this.mouseupTime - this.mousedownTime < 1050) {
          HzoomDec(this.queryparms4).then(response => {
            if (response.msg != null) {
              this.$modal.msg(response.msg);
            } else {
            }
          });
        }
      }, 1000),
      startHBbjRunning1() {
        this.mousedownTime = new Date().getTime()
        this.timer = setInterval(() => {
          HzoomDec1(this.queryparms4).then(response => {
            //   if (typeof (response) != null) {
            //
            // }else{
            //   this.$modal.msg(response.msg);
            // }
          });
        }, 500)
      },
      stopHBbjRunning1() {
        this.mouseupTime = new Date().getTime()
        clearInterval(this.timer)
        HzoomDecEnd1(this.queryparms4).then(response => {
          // if (typeof (response) != null) {
          //   this.$modal.msg(response.msg);
          // }
        });
      },
      //云台变焦+ 开始
      startHBjAddRunning: _.throttle(function () {
        if (this.mouseupTime - this.mousedownTime < 1050) {
          HfocusAdd(this.queryparms4).then(response => {
            if (response.msg != null) {
              this.$modal.msg(response.msg);
            } else {
            }
          });
        }
      }, 1000),
      startHBjAddRunning1() {
        this.mousedownTime = new Date().getTime()
        this.timer = setInterval(() => {
          HfocusAdd1(this.queryparms4).then(response => {
            //   if (typeof (response) != null) {
            //
            // }else{
            //   this.$modal.msg(response.msg);
            // }
          });
        }, 500)
      },
      stopHBjAddRunning1() {
        this.mouseupTime = new Date().getTime()
        clearInterval(this.timer)
        HfocusAddEnd1(this.queryparms4).then(response => {
          // if (typeof (response) != null) {
          //   this.$modal.msg(response.msg);
          // }
        });
      },
      //云台变焦- 开始
      startHBjjRunning: _.throttle(function () {
        if (this.mouseupTime - this.mousedownTime < 1050) {
          HfocusDec(this.queryparms4).then(response => {
            if (response.msg != null) {
              this.$modal.msg(response.msg);
            } else {
            }
          });
        }
      }, 1000),
      startHBjjRunning1() {
        this.mousedownTime = new Date().getTime()
        this.timer = setInterval(() => {
          HfocusDec1(this.queryparms4).then(response => {
            //   if (typeof (response) != null) {
            //
            // }else{
            //   this.$modal.msg(response.msg);
            // }
          });
        }, 500)
      },
      stopHBjjRunning1() {
        this.mouseupTime = new Date().getTime()
        clearInterval(this.timer)
        HfocusDecEnd1(this.queryparms4).then(response => {
          // if (typeof (response) != null) {
          //   this.$modal.msg(response.msg);
          // }
        });
      },
      //云台光圈+ 开始
      startHGqAddRunning: _.throttle(function () {
        if (this.mouseupTime - this.mousedownTime < 1050) {
          HirisAdd(this.queryparms4).then(response => {
            if (response.msg != null) {
              this.$modal.msg(response.msg);
            } else {
            }
          });
        }
      }, 1000),
      startHGqAddRunning1() {
        this.mousedownTime = new Date().getTime()
        this.timer = setInterval(() => {
          HirisAdd1(this.queryparms4).then(response => {
            //   if (typeof (response) != null) {
            //
            // }else{
            //   this.$modal.msg(response.msg);
            // }
          });
        }, 500)
      },
      stopHGqAddRunning1() {
        this.mouseupTime = new Date().getTime()
        clearInterval(this.timer)
        HirisAddEnd1(this.queryparms4).then(response => {
          // if (typeof (response) != null) {
          //   this.$modal.msg(response.msg);
          // }
        });
      },
      //云台光圈-开始
      startHGqjRunning: _.throttle(function () {
        if (this.mouseupTime - this.mousedownTime < 1050) {
          HirisDec(this.queryparms4).then(response => {
            if (response.msg != null) {
              this.$modal.msg(response.msg);
            } else {
            }
          });
        }
      }, 1000),
      startHGqjRunning1() {
        this.mousedownTime = new Date().getTime()
        this.timer = setInterval(() => {
          HirisDec1(this.queryparms4).then(response => {
            //   if (typeof (response) != null) {
            //
            // }else{
            //   this.$modal.msg(response.msg);
            // }
          });
        }, 500)
      },
      stopHGqjRunning1() {
        this.mouseupTime = new Date().getTime()
        clearInterval(this.timer)
        HirisDecEnd1(this.queryparms4).then(response => {
          // if (typeof (response) != null) {
          //   this.$modal.msg(response.msg);
          // }
        });
      },


      ////////////////////吊舱摄像头/////////////////////
      //吊舱前摄像头
      //前-电子放大
      DCQzoomFocus() {
        const q_video_ip = localStorage.getItem("video_ip1");
        DCQzoomFocus(q_video_ip).then(response => {
        });
      },
      //前-电子缩小
      DCQzoomLess() {
        const q_video_ip = localStorage.getItem("video_ip1");
        DCQzoomLess(q_video_ip).then(response => {
        });
      },//前-电子停止
      DCQzoomStop() {
        const q_video_ip = localStorage.getItem("video_ip1");
        DCQzoomStop(q_video_ip).then(response => {
        });
      },//电子缩小
      startDCsx() {
        this.DCQzoomLess()
        console.log('缩小开始')
      }, //电子放大
      startDCfd() {
        this.DCQzoomFocus()
        console.log('放大开始')
      },
      stopDCsxOrfd() {
        this.DCQzoomStop()
        console.log('缩小或放大停止')
      },//前-向上
      DCQptzUp() {
        const q_video_ip = localStorage.getItem("video_ip1");
        DCQptzUp(q_video_ip).then(response => {
        });
      }, //前-向下
      DCQptzDown() {
        const q_video_ip = localStorage.getItem("video_ip1");
        DCQptzDown(q_video_ip).then(response => {
        });
      }, //前-向左
      DCQptzLeft() {
        const q_video_ip = localStorage.getItem("video_ip1");
        DCQptzLeft(q_video_ip).then(response => {
        });
      }, //前-向右
      DCQptzRight() {
        const q_video_ip = localStorage.getItem("video_ip1");
        DCQptzRight(q_video_ip).then(response => {
        });
      },//前-云台停止
      DCQptzStop() {
        const q_video_ip = localStorage.getItem("video_ip1");
        DCQptzStop(q_video_ip).then(response => {
        });
      }, //前-左上
      DCQLeftUp() {
        const q_video_ip = localStorage.getItem("video_ip1");
        DCQLeftUp(q_video_ip).then(response => {
        });
      }, //前-左下
      DCQLeftDown() {
        const q_video_ip = localStorage.getItem("video_ip1");
        DCQLeftDown(q_video_ip).then(response => {
        });
      },//前-右上
      DCQRightUp() {
        const q_video_ip = localStorage.getItem("video_ip1");
        DCQRightUp(q_video_ip).then(response => {
        });
      }, //前-右下
      DCQRightDown() {
        const q_video_ip = localStorage.getItem("video_ip1");
        DCQRightDown(q_video_ip).then(response => {
        });
      },//向上
      startQUp() {
        this.DCQptzUp()
      }, //右上
      startQRightUp() {
        this.DCQRightUp()
      },//右
      startQRight() {
        this.DCQptzRight()
      }, //右下
      startQRightDow() {
        this.DCQRightDown()
      },//下
      startQDow() {
        this.DCQptzDown()
      },//左下
      startQLeftDow() {
        this.DCQLeftDown()
      },//左
      startQLeft() {
        this.DCQptzLeft()
      },//左上
      startQLeftUp() {
        this.DCQLeftUp()
      },//所有方向停止
      stopQYt() {
        this.DCQptzStop()
      },
      // 前-手动录视频--开始
      DCQstartVideo() {
        const q_video_ip = localStorage.getItem("video_ip1");
        DCQstartVideo(q_video_ip).then(response => {
          if (typeof (response) != null) {
            this.$modal.msg(response.msg);
          }
        });
      }, // 前-手动录视频--停止
      DCQendVideo() {
        const q_video_ip = localStorage.getItem("video_ip1");
        DCQendVideo(q_video_ip).then(response => {
          if (typeof (response) != null) {
            this.$modal.msg(response.msg);
            this.DCQsmbVideo(q_video_ip);
          }
        });
      },
      //拍照
      DCQpicture() {
        const q_video_ip = localStorage.getItem("video_ip1");
        DCQpicture(q_video_ip).then(response => {
          if (typeof (response) != null) {
            this.$modal.msg(response.msg);
            this.DCQsmbPicture(q_video_ip);
          }
        });
      },// 前-同步视频文件
      DCQsmbVideo(q_video_ip) {
        // const q_video_ip= localStorage.getItem("video_ip1");
        DCQsmbVideo(q_video_ip).then(response => {
        });
      }, // 前-同步照片文件
      DCQsmbPicture(q_video_ip) {
        // const q_video_ip= localStorage.getItem("video_ip1");
        DCQsmbPicture(q_video_ip).then(response => {
        });
      },
      ///////吊舱后摄像头//////
      //后-电子放大
      DCHzoomFocus() {
        const h_video_ip = localStorage.getItem("video_ip2");
        DCHzoomFocus(h_video_ip).then(response => {
        });
      }, //后-电子缩小
      DCHzoomLess() {
        const h_video_ip = localStorage.getItem("video_ip2");
        DCHzoomLess(h_video_ip).then(response => {
        });
      }, //后-电子停止
      DCHzoomStop() {
        const h_video_ip = localStorage.getItem("video_ip2");
        DCHzoomStop(h_video_ip).then(response => {
        });
      }, //电子缩小
      startDCHsx() {
        this.DCHzoomLess()
        console.log('缩小开始')
      },//电子放大
      startDCHfd() {
        this.DCHzoomFocus()
        console.log('放大开始')
      },
      stopDCHsxOrfd() {
        this.DCHzoomStop()
        console.log('缩小或放大停止')
      }, //后-向上
      DCHptzUp() {
        const h_video_ip = localStorage.getItem("video_ip2");
        DCHptzUp(h_video_ip).then(response => {
        });
      }, //后-向下
      DCHptzDown() {
        const h_video_ip = localStorage.getItem("video_ip2");
        DCHptzDown(h_video_ip).then(response => {
        });
      },//后-向左
      DCHptzLeft() {
        const h_video_ip = localStorage.getItem("video_ip2");
        DCHptzLeft(h_video_ip).then(response => {
        });
      },//后-向右
      DCHptzRight() {
        const h_video_ip = localStorage.getItem("video_ip2");
        DCHptzRight(h_video_ip).then(response => {
        });
      }, //后-云台停止
      DCHptzStop() {
        const h_video_ip = localStorage.getItem("video_ip2");
        DCHptzStop(h_video_ip).then(response => {
        });
      },//后-左上
      DCHLeftUp() {
        const h_video_ip = localStorage.getItem("video_ip2");
        DCHLeftUp(h_video_ip).then(response => {
        });
      }, //后-左下
      DCHLeftDown() {
        const h_video_ip = localStorage.getItem("video_ip2");
        DCHLeftDown(h_video_ip).then(response => {
        });
      }, //后-右上
      DCHRightUp() {
        const h_video_ip = localStorage.getItem("video_ip2");
        DCHRightUp(h_video_ip).then(response => {
        });
      }, //后-右下
      DCHRightDown() {
        const h_video_ip = localStorage.getItem("video_ip2");
        DCHRightDown(h_video_ip).then(response => {
        });
      },
      //向上
      startHUp() {
        this.DCHptzUp()
      },//右上
      startHRightUp() {
        this.DCHRightUp()
      }, //右
      startHRight() {
        this.DCHptzRight()
      }, //右下
      startHRightDow() {
        this.DCHRightDown()
      },//下
      startHDow() {
        this.DCHptzDown()
      },//左下
      startHLeftDow() {
        this.DCHLeftDown()
      }, //左
      startHLeft() {
        this.DCHptzLeft()
      }, //左上
      startHLeftUp() {
        this.DCHLeftUp()
      },//所有方向停止
      stopHYt() {
        this.DCHptzStop()
      }, //后-手动录视频--开始
      DCHstartVideo() {
        const h_video_ip = localStorage.getItem("video_ip2");
        DCHstartVideo(h_video_ip).then(response => {
          if (typeof (response) != null) {
            this.$modal.msg(response.msg);
          }
        });
      }, // 后-手动录视频--停止
      DCHendVideo() {
        const h_video_ip = localStorage.getItem("video_ip2");
        DCHendVideo(h_video_ip).then(response => {
          if (typeof (response) != null) {
            this.$modal.msg(response.msg);
            this.DCHsmbVideo(h_video_ip);
          }
        });
      },//拍照
      DCHpicture() {
        const h_video_ip = localStorage.getItem("video_ip2");
        DCHpicture(h_video_ip).then(response => {
          if (typeof (response) != null) {
            this.$modal.msg(response.msg);
            this.DCHsmbPicture(h_video_ip);
          }
        });
      }, // 后-同步视频文件
      DCHsmbVideo(h_video_ip) {
        // const h_video_ip= localStorage.getItem("video_ip2");
        DCHsmbVideo(h_video_ip).then(response => {
        });
      }, // 后-同步照片文件
      DCHsmbPicture(h_video_ip) {
        // const h_video_ip= localStorage.getItem("video_ip2");
        DCHsmbPicture(h_video_ip).then(response => {
        });
      },


      ///////////////////海康摄像头/////////////////////
      //校时
      HKtiming() {
        HKtiming(this.queryparms4).then(response => {
          if (typeof (response) != null) {
            this.$modal.msg(response.msg);
          }
        });
      },
      //水印
      HKwatermark() {
        HKwatermark(this.queryparms4).then(response => {
          if (typeof (response) != null) {
            this.$modal.msg(response.msg);
          }
        });
      },
      //手动录像开始
      HKstartVideo() {
        HKstartVideo(this.queryparms4).then(response => {
          if (typeof (response) != null) {
            this.$modal.msg(response.msg);
          }
        });
      },
      //手动录像停止
      HKendVideo() {
        HKendVideo().then(response => {
          if (typeof (response) != null) {
            this.$modal.msg(response.msg);
          }
        });
      },
      //拍照
      HKpicture() {
        HKpicture(this.queryparms4).then(response => {
          if (typeof (response) != null) {
            this.$modal.msg(response.msg);
          }
        });
      },
      //云台向上点击
      startUp: _.throttle(function (event) {
        if (this.mousupTime - this.mousdownTime < 1050) {
          HKptzUp(this.queryparms4).then(response => {
            if (response.msg != null) {
              this.$modal.msg(response.msg);
            } else {

            }
          });
        }
      }, 1000),
      //云台向上----长按
      startUp1() {
        this.mousdownTime = new Date().getTime()
        this.timer = setInterval(() => {
          HKptzUp1(this.queryparms4).then(response => {
            // if (typeof (response) != null) {
            //   this.$modal.msg(response.msg);
            // }
          });
        }, 500)
      },
      stopUp1() {
        this.mousupTime = new Date().getTime()
        clearInterval(this.timer)
        HKptzUpEnd1().then(response => {
          // if (typeof (response) != null) {
          //   // this.$modal.msg(response.msg);
          // }
        });
      },
      //云台向下点击
      startDown: _.throttle(function (event) {
        if (this.mousupTime - this.mousdownTime < 1050) {
          HKptzDown(this.queryparms4).then(response => {
            if (response.msg != null) {
              this.$modal.msg(response.msg);
            } else {
            }
          });
        }
      }, 1000),
      //云台向下----长按
      startDown1() {
        this.mousdownTime = new Date().getTime()
        this.timer = setInterval(() => {
          HKptzDown1(this.queryparms4).then(response => {
            // if (typeof (response) != null) {
            //   this.$modal.msg(response.msg);
            // }
          });
        }, 500)
      },
      stopDown1() {
        this.mousupTime = new Date().getTime()
        clearInterval(this.timer)
        HKptzDownEnd1().then(response => {
          if (typeof (response) != null) {
            // this.$modal.msg(response.msg);
          }
        });
      },
      //云台向左点击
      startLeft: _.throttle(function (event) {
        if (this.mousupTime - this.mousdownTime < 1050) {
          HKptzLeft(this.queryparms4).then(response => {
            if (response.msg != null) {
              this.$modal.msg(response.msg);
            } else {
            }
          });
        }
      }, 1000),
      //云台向左----长按
      startLeft1() {
        this.mousdownTime = new Date().getTime()
        this.timer = setInterval(() => {
          HKptzLeft1(this.queryparms4).then(response => {
            // if (typeof (response) != null) {
            //   this.$modal.msg(response.msg);
            // }
          });
        }, 500)
      },
      stopLeft1() {
        this.mousupTime = new Date().getTime()
        clearInterval(this.timer)
        HKptzLeftEnd1().then(response => {
          if (typeof (response) != null) {
            // this.$modal.msg(response.msg);
          }
        });
      },
      //云台向右点击
      startRight: _.throttle(function (event) {
        if (this.mousupTime - this.mousdownTime < 1050) {
          HKptzRight(this.queryparms4).then(response => {
            if (response.msg != null) {
              this.$modal.msg(response.msg);
            } else {
            }
          });
        }
      }, 1000),
      //云台向右----长按
      startRight1() {
        this.mousdownTime = new Date().getTime()
        this.timer = setInterval(() => {
          HKptzRight1(this.queryparms4).then(response => {
            // if (typeof (response) != null) {
            //   this.$modal.msg(response.msg);
            // }
          });
        }, 500)
      },
      stopRight1() {
        this.mousupTime = new Date().getTime()
        clearInterval(this.timer)
        HKptzRightEnd1().then(response => {
          if (typeof (response) != null) {
            // this.$modal.msg(response.msg);
          }
        });
      },
      //云台向左上点击
      startUpLeft: _.throttle(function (event) {
        if (this.mousupTime - this.mousdownTime < 1050) {
          HKptzLeftUp(this.queryparms4).then(response => {
            if (response.msg != null) {
              this.$modal.msg(response.msg);
            } else {
            }
          });
        }
      }, 1000),
      //云台向左上----长按
      startUpLeft1() {
        this.mousdownTime = new Date().getTime()
        this.timer = setInterval(() => {
          HKptzLeftUp1(this.queryparms4).then(response => {
            // if (typeof (response) != null) {
            //   this.$modal.msg(response.msg);
            // }
          });
        }, 500)
      },
      stopUpLeft1() {
        this.mousupTime = new Date().getTime()
        clearInterval(this.timer)
        HKptzLeftUpEnd1().then(response => {
          if (typeof (response) != null) {
            // this.$modal.msg(response.msg);
          }
        });
      },
      //云台向右上点击
      startUpRight: _.throttle(function (event) {
        if (this.mousupTime - this.mousdownTime < 1050) {
          HKptzRightUp(this.queryparms4).then(response => {
            if (response.msg != null) {
              this.$modal.msg(response.msg);
            } else {
            }
          });
        }
      }, 1000),
      //云台向右上----长按
      startUpRight1() {
        this.mousdownTime = new Date().getTime()
        this.timer = setInterval(() => {
          HKptzRightUp1(this.queryparms4).then(response => {
            // if (typeof (response) != null) {
            //   this.$modal.msg(response.msg);
            // }
          });
        }, 500)
      },
      stopUpRight1() {
        this.mousupTime = new Date().getTime()
        clearInterval(this.timer)
        HKptzRightUpEnd1().then(response => {
          if (typeof (response) != null) {
            // this.$modal.msg(response.msg);
          }
        });
      },
      //云台向左下点击
      startDownLeft: _.throttle(function (event) {
        if (this.mousupTime - this.mousdownTime < 1050) {
          HKptzLeftDown(this.queryparms4).then(response => {
            if (response.msg != null) {
              this.$modal.msg(response.msg);
            } else {
            }
          });
        }
      }, 1000),
      //云台向左下----长按
      startDownLeft1() {
        this.mousdownTime = new Date().getTime()
        this.timer = setInterval(() => {
          HKptzLeftDown1(this.queryparms4).then(response => {
            // if (typeof (response) != null) {
            //   this.$modal.msg(response.msg);
            // }
          });
        }, 500)
      },
      stopDownLeft1() {
        this.mousupTime = new Date().getTime()
        clearInterval(this.timer)
        HKptzLeftDownEnd1().then(response => {
          if (typeof (response) != null) {
            // this.$modal.msg(response.msg);
          }
        });
      },
      //云台向右下点击
      startDownRight: _.throttle(function (event) {
        if (this.mousupTime - this.mousdownTime < 1050) {
          HKptzRightDown(this.queryparms4).then(response => {
            if (response.msg != null) {
              this.$modal.msg(response.msg);
            } else {
            }
          });
        }
      }, 1000),
      //云台向右下----长按
      startDownRight1() {
        this.mousdownTime = new Date().getTime()
        this.timer = setInterval(() => {
          HKptzRightDown1(this.queryparms4).then(response => {
            // if (typeof (response) != null) {
            //   this.$modal.msg(response.msg);
            // }
          });
        }, 500)
      },
      stopDownRight1() {
        this.mousupTime = new Date().getTime()
        clearInterval(this.timer)
        HKptzRightDownEnd1().then(response => {
          if (typeof (response) != null) {
            // this.$modal.msg(response.msg);
          }
        });
      },
      //云台变倍+点击
      startBBplus: _.throttle(function (event) {
        if (this.mousupTime - this.mousdownTime < 1050) {
          HKzoomAdd(this.queryparms4).then(response => {
            if (response.msg != null) {
              this.$modal.msg(response.msg);
            } else {
            }
          });
        }
      }, 1000),
      //云台变倍+  --  长按
      startBBplus1() {
        this.mousdownTime = new Date().getTime()
        this.timer = setInterval(() => {
          HKzoomAdd1(this.queryparms4).then(response => {
            // if (typeof (response) != null) {
            //   this.$modal.msg(response.msg);
            // }
          });
        }, 500)
      },
      stopBBplus1() {
        this.mousupTime = new Date().getTime()
        clearInterval(this.timer)
        HKzoomAddEnd1().then(response => {
          if (typeof (response) != null) {
            // this.$modal.msg(response.msg);
          }
        });
      },
      //云台变倍-点击
      startBBminus: _.throttle(function (event) {
        if (this.mousupTime - this.mousdownTime < 1050) {
          HKzoomDec(this.queryparms4).then(response => {
            if (response.msg != null) {
              this.$modal.msg(response.msg);
            } else {
            }
          });
        }
      }, 1000),
      //云台变倍-  --  长按
      startBBminus1() {
        this.mousdownTime = new Date().getTime()
        this.timer = setInterval(() => {
          HKzoomDec1(this.queryparms4).then(response => {
            // if (typeof (response) != null) {
            //   this.$modal.msg(response.msg);
            // }
          });
        }, 500)
      },
      stopBBminus1() {
        this.mousupTime = new Date().getTime()
        clearInterval(this.timer)
        HKzoomDecEnd1().then(response => {
          if (typeof (response) != null) {
            // this.$modal.msg(response.msg);
          }
        });
      },
      //云台变焦+点击
      startBJplus: _.throttle(function (event) {
        if (this.mousupTime - this.mousdownTime < 1050) {
          HKfocusAdd(this.queryparms4).then(response => {
            if (response.msg != null) {
              this.$modal.msg(response.msg);
            } else {
            }
          });
        }
      }, 1000),
      //云台变焦+  --  长按
      startBJplus1() {
        this.mousdownTime = new Date().getTime()
        this.timer = setInterval(() => {
          HKfocusAdd1(this.queryparms4).then(response => {
            // if (typeof (response) != null) {
            //   this.$modal.msg(response.msg);
            // }
          });
        }, 500)
      },
      stopBJplus1() {
        this.mousupTime = new Date().getTime()
        clearInterval(this.timer)
        HKfocusAddEnd1().then(response => {
          if (typeof (response) != null) {
            // this.$modal.msg(response.msg);
          }
        });
      },
      //云台变焦-点击
      startBJminus: _.throttle(function (event) {
        if (this.mousupTime - this.mousdownTime < 1050) {
          HKfocusDec(this.queryparms4).then(response => {
            if (response.msg != null) {
              this.$modal.msg(response.msg);
            } else {
            }
          });
        }
      }, 1000),
      //云台变焦-  --  长按
      startBJminus1() {
        this.mousdownTime = new Date().getTime()
        this.timer = setInterval(() => {
          HKfocusDec1(this.queryparms4).then(response => {
            // if (typeof (response) != null) {
            //   this.$modal.msg(response.msg);
            // }
          });
        }, 500)
      },
      stopBJminus1() {
        this.mousupTime = new Date().getTime()
        clearInterval(this.timer)
        HKfocusDecEnd1().then(response => {
          if (typeof (response) != null) {
            // this.$modal.msg(response.msg);
          }
        });
      },
      //云台光圈+ 点击
      startGQplus: _.throttle(function (event) {
        if (this.mousupTime - this.mousdownTime < 1050) {
          HKirisAdd(this.queryparms4).then(response => {
            if (response.msg != null) {
              this.$modal.msg(response.msg);
            } else {
            }
          });
        }
      }, 1000),
      //云台光圈+ --  长按
      startGQplus1() {
        this.mousdownTime = new Date().getTime()
        this.timer = setInterval(() => {
          HKirisAdd1(this.queryparms4).then(response => {
            // if (typeof (response) != null) {
            //   this.$modal.msg(response.msg);
            // }
          });
        }, 500)
      },
      stopGQplus1() {
        this.mousupTime = new Date().getTime()
        clearInterval(this.timer)
        HKirisAddEnd1().then(response => {
          if (typeof (response) != null) {
            // this.$modal.msg(response.msg);
          }
        });
      },
      //云台光圈- 点击
      startGQminus: _.throttle(function (event) {
        if (this.mousupTime - this.mousdownTime < 1050) {
          HKirisDec(this.queryparms4).then(response => {
            if (response.msg != null) {
              this.$modal.msg(response.msg);
            } else {
            }
          });
        }
      }, 1000),
      //云台光圈- --  长按
      startGQminus1() {
        this.mousdownTime = new Date().getTime()
        this.timer = setInterval(() => {
          HKirisDec1(this.queryparms4).then(response => {
            // if (typeof (response) != null) {
            //   this.$modal.msg(response.msg);
            // }
          });
        }, 500)
      },
      stopGQminus1() {
        this.mousupTime = new Date().getTime()
        clearInterval(this.timer)
        HKirisDecEnd1().then(response => {
          if (typeof (response) != null) {
            // this.$modal.msg(response.msg);
          }
        });
      },
      //电机转速
      echarts1(djzs) {
        setTimeout(() => {
          myChart= echarts.init(document.getElementById("gauges"));
          myChart.setOption(
            {
              series: [
                {
                  radius: "100%",
                  center: ['50%', '50%'],
                  type: 'gauge',
                  axisLine: {
                    lineStyle: {
                      width: 20,
                      color: [
                        [0.3, '#3e78f5'],
                        [0.7, '#9a54eb'],
                        [1, '#f37886']
                      ]
                    }
                  },
                  pointer: {
                    width: 6,
                    itemStyle: {
                      color: '#3e78f5'
                    }
                  },
                  axisTick: {
                    distance: -20,
                    length: 11,
                    lineStyle: {
                      color: '#fff',
                      width: 1
                    }
                  },
                  splitLine: {
                    distance: -20,
                    length: 20,
                    lineStyle: {
                      color: '#fff',
                      width: 2
                    }
                  },
                  axisLabel: {
                    color: '#fff',
                    distance: 9,
                    fontSize: 6
                  },
                  detail: {
                    // width:60,
                    // height:60,
                    fontSize: 10,
                    valueAnimation: true,
                    formatter: '{value} r/min',
                    color: '#fff'
                  },
                  data: [
                    {
                      value: djzs,
                      name: '电机转速',
                    }
                  ],
                  title: {
                    show: true,
                    fontSize: 10,
                    offsetCenter: ["0", "10%"],
                    color: '#fff'
                  },
                  max: 5000,
                  min: 0
                }
              ]
            }
          );
          window.addEventListener("resize", () => {
            if(myChart!=null)myChart.resize();
          })
        }, 1);
      }, //电机温度
      echarts2(djwd) {
        setTimeout(() => {
          myChart1 = echarts.init(document.getElementById("gauges2"));
          myChart1.setOption(
            {
              series: [
                {
                  radius: "70%",
                  center: ['50%', '50%'],
                  type: 'gauge',
                  splitNumber: 9,
                  axisLine: {
                    lineStyle: {
                      width: 14,
                      color: [
                        [1, '#ddebf6'],
                      ]
                    }
                  },
                  pointer: {
                    show: false,
                    width: 5,
                    // itemStyle: {
                    //   color: '#3e78f5'
                    // }
                  },
                  axisTick: {
                    // show:false,
                    distance: -13,
                    length: 10,
                    lineStyle: {
                      color: '#a9a9a9',
                      width: 1
                    }
                  },
                  splitLine: {
                    distance: -10,
                    length: 14,
                    lineStyle: {
                      color: '#a9a9a9',
                      width: 2
                    }
                  },
                  axisLabel: {
                    color: '#fff',
                    distance: -29,
                    fontSize: 7
                  },
                  detail: {
                    // width:60,
                    // height:60,
                    fontSize: 10,
                    valueAnimation: true,
                    formatter: '{value}(°C)',
                    color: '#daa666'
                  },
                  data: [
                    {
                      value: djwd,
                      name: '电机温度',
                    }
                  ],
                  title: {
                    show: true,
                    offsetCenter: ["0", "-20%"],
                    color: '#daa666',
                    fontSize: 10
                  },
                  max: 360,
                  min: 0
                }
              ]
            }
          );
          window.addEventListener("resize", () => {
            if(myChart1!=null)myChart1.resize();
          })
        }, 1);
      },//电池电量
      echarts3(dcdl) {
        setTimeout(() => {
          myChart2 = echarts.init(document.getElementById("gauges3"));
          myChart2.setOption(
            {
              series: [{
                name: "电量",
                type: "gauge",
                clockwise: true,
                data: [{
                  value: dcdl,
                  name: "电池电量",
                }],
                radius: "100%",
                // 仪表盘半径
                // startAngle: 208,
                // endAngle: -28,
                min: 0,
                max: 100,
                splitNumber: 10,
                center: ["50%",
                  "50%"],
                axisLabel: {
                  // 大刻度标签。
                  show: true,
                  distance: 10,
                  color: "white",
                  fontSize: 8,
                  formatter: "{value}",
                },
                splitLine: {
                  length: 10,
                  // 分隔线长度
                  lineStyle: {
                    width: 2,
                    color: '#ffffff'
                  }
                },
                axisLine: {
                  // 仪表盘轴线(轮廓线)相关配置。
                  show: true,
                  lineStyle: {
                    // 仪表盘轴线样式。
                    opacity: 1,
                    width: 14,
                    // 表盘宽度
                    shadowBlur: 10,
                    color: [// 仪表盘轴线颜色
                      [1,
                        new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                          offset: 0,
                          color: "#00e4f0"
                        },
                          {
                            offset: 0.3,
                            color: "#00e4f0"
                          },
                          {
                            offset: 1,
                            color: "#00e4f0"
                          }])
                      ]
                    ]
                  },
                },
                axisTick: {
                  // 小刻度相关
                  splitNumber: 5,
                  // 小刻度个数
                  show: true
                },
                detail: {
                  // 仪表盘详情数据相关
                  color: "#5ab1ef",
                  fontSize: 10,
                  formatter: "{value}%",
                  offsetCenter: [0,
                    '20']
                },
                title: {
                  show: true,
                  offsetCenter: ["0", "-18%"],
                  color: '#b6cbea',
                  fontSize: 10
                },
                itemStyle: {
                  // 指针样式
                  color: "#fff"
                },
                pointer: {
                  // 仪表盘指针。
                  show: true,
                  length: "70%",
                  width: 6,
                },
              },
              ],
            }
          );
          window.addEventListener("resize", () => {
            if(myChart2!=null)myChart2.resize();
          })
        }, 1);
      }
    },
    beforeDestroy() {
      if(myChart != null){myChart.clear();myChart = null;}
      if(myChart1 != null){myChart1.clear();myChart1 = null;}
      if(myChart2 != null){myChart2.clear();myChart2 = null;}
      //清除定时器
      if (this.timer) {
        clearInterval(this.timer); //关闭
      }
      if (this.webRtcServer != null) this.webRtcServer.disconnect()
      //this.webRtcServer = null
      if (this.webRtcServer1 != null) this.webRtcServer1.disconnect()
      //this.webRtcServer1 = null
    },
    enter() {
      this.isDologin = true;
    },
    leave() {
      this.isDologin = false;
    }
  }
</script>

<style lang="scss" scoped>
  .app-container {
    width: 100%;
    height: calc(100vh - 35px);
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: #081a46;
    //padding-left:0;
  }

  * {
    margin: 0;
    //padding: 0;
  }

  .el-button+.el-button {
    margin-left: 0px;
  }

  //左边
  .left {
    width: 19%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .put {
      width: 98%;
      margin: 10px;

      ::v-deep .el-input {
        width: 100%;
        height: 20px;
      }

      ::v-deep .el-input__inner {
        border: 2px solid #0264bf;
        background-color: #081a46;
        // margin: 10px;
      }
    }

    .table {
      width: 98%;
      height: 200px;
      margin: 10px;
      // margin-top: 20px;
      overflow: auto;

      ::v-deep .el-table__body-wrapper {
        &::-webkit-scrollbar {
          // 整个滚动条
          width: 0px; // 纵向滚动条的宽度
          background: rgba(71, 103, 182, 0.3);
          border: none;
        }

        &::-webkit-scrollbar-track {
          // 滚动条轨道
          border: none;
        }
      }

      .el-table {
        width: 100%;
      }

      ::v-deep .el-table th.gutter {
        display: none;
        width: 0
      }

      ::v-deep .el-table colgroup col[name='gutter'] {
        display: none;
        width: 0;
      }

      // ::deep .el-table::before {
      //     height: 0px;
      // }

      ::v-deep .el-table__body {
        width: 100%;
        // padding-left: 10px;
      }

      ::v-deep .el-table__body-wrapper {
        width: 100%;
        background-color: #081a46;

      }

      /*滚动条的宽度*/
      .commonScrollbarTable ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
        display: none;
        width: 0;
      }

      .scrollbarShow ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
        display: block;
        width: 0;
      }

      // ::v-deep .el-table .cell{
      //     padding: 0;
      // }
      //::v-deep .el-table,
      // ::v-deep .el-table__expanded-cell {
      //     background-color: transparent;
      // }
      ::v-deep .el-table tr {
        background-color: #081a46;
        border: none;
        // height: 50px;
        width: 100%;
      }

      ::v-deep .el-table td {
        background-color: #081a46;
        border: none;
        width: 100%;
        // height: 50px;
      }

      // /* 表格内背景颜色 */
      ::v-deep .el-table th {
        //background-color:#081a46;
        border: none;
        width: 100%;
      }

      // 移入变色
      ::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {
        background-color: #222448;
      }
    }

    ::v-deep.el-progress-bar__inner {
      background-color: unset; // 将进度条默认的颜色给去除掉，若不生效就再加个!important
      // background-image: linear-gradient(90deg,#252799 100%,#2887b3 50% #27c9de 0%);  // 给进度条加上渐变色
      // background: linear-gradient(to right, #252799, #2887b3, #27c9de 70px);
      // background: linear-gradient(to right, red, blue 70px);
      // stroke-linecap:butt
    }

    .table::-webkit-scrollbar {
      display: none;
      /*隐藏滚动条*/
    }

    .table-bottom {
      width: 98%;
      height: 170px;
      margin: 10px;
      // margin-top: 20px;
      overflow: auto;

      ::v-deep .el-table__body-wrapper {
        &::-webkit-scrollbar {
          // 整个滚动条
          width: 0px; // 纵向滚动条的宽度
          background: rgba(71, 103, 182, 0.3);
          border: none;
        }

        &::-webkit-scrollbar-track {
          // 滚动条轨道
          border: none;
        }
      }

      .el-table {
        width: 100%;

      }

      ::v-deep .el-table th.gutter {
        display: none;
        width: 0
      }

      ::v-deep .el-table colgroup col[name='gutter'] {
        display: none;
        width: 0;
      }

      // ::deep .el-table::before {
      //     height: 0px;
      // }

      ::v-deep .el-table__body {
        width: 100%;
        // padding-left: 10px;
        background-color: #081a46;

      }

      ::v-deep .el-table__body-wrapper {
        width: 100%;
        background-color: #081a46;
      }

      /*滚动条的宽度*/
      .commonScrollbarTable ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
        display: none;
        width: 0;
      }

      .scrollbarShow ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
        display: block;
        width: 0;
      }

      // ::v-deep .el-table .cell{
      //     padding: 0;
      // }
      //::v-deep .el-table,
      // ::v-deep .el-table__expanded-cell {
      //     background-color: transparent;
      // }
      ::v-deep .el-table tr {
        // background-color: transparent;
        background-color: #081a46;
        border: none;
        // height: 50px;
        width: 100%;
      }

      ::v-deep .el-table td {
        background-color: #081a46;
        //background-color: trannt;
        border: none;
        width: 100%;
        // height: 50px;
      }

      // /* 表格内背景颜色 */
      ::v-deep .el-table th {
        background-color: transparent;
        border: none;
        width: 100%;
      }

      // 移入变色
      ::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {
        background-color: #222448;
      }
    }
  }

  //中间
  .video-center {
    width: 36%;
    height: 100%;
    margin-left: 1%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #081a46;

    .center-header {
      width: 98%;
      height: 65px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border: 1px solid #2A2E4A;
      border-top: none;
      border-radius: 0px 0px 4px 4px;
      margin-bottom: 8px;

      p {
        width: 148px;
        height: 35px;
        font-size: 20px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #E9E9E9;
      }
    }

    .center-box1 {
      width: 98%;
      height: 60%;
      background: #081a46;
      border: 1px solid #262e63;
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      align-items: center;

      .Speed-dial {
        width: 100%;
        height: 45%;
        display: flex;
        justify-content: space-between;
        //background-color: #00FF00;
      }

      .right-mode1 {
        width: 80%;
        height: 15%;
        //margin-bottom: 1%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        // background-color: #0264bf;

        .mode-box {
          width: 60px;
          height: 40px;
          text-align: center;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          :nth-child(1) {
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #EDEDED;
            margin-bottom: 1%;
          }

          :nth-child(2) {
            width: 60px;
            height: 25px;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 2px solid #54619D;
            border-radius: 10px;
            font-size: 12px;
            font-family: Bahnschrift;
            font-weight: 400;
            color: #75bfff;
          }

        }
      }

      .right-mode2 {
        width: 80%;
        height: 15%;
        //margin-bottom: 1%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        //background-color: #3eecf5;

        .mode-box {
          width: 60px;
          height: 40px;
          text-align: center;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          :nth-child(1) {
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #EDEDED;
            margin-bottom: 1%;
          }

          :nth-child(2) {
            width: 60px;
            height: 25px;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 2px solid #54619D;
            border-radius: 10px;
            font-size: 12px;
            font-family: Bahnschrift;
            font-weight: 400;
            color: #75bfff;
          }

        }
      }

      .Mode-selection {
        width: 98%;
        height: 6%;
        display: flex;
        justify-content: center;
        align-items: center;
        //background-color: #75bfff;
        //margin-bottom: 4px;
        //margin-left: 7px;

        p {
          width: 96px;
          height: 24px;
          font-size: 15px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #EDEDED;
        }
      }

      .Operation-button {
        width: 80%;
        height: 20%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-left: 7px;
        margin-bottom: 2%;

        .Operation-buttonBox {
          width: 60px;
          height: 60px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          :nth-child(1) {
            width: 25px;
            height: 25px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(68deg, #3040F4, #3F79F4);
            margin-bottom: 5px;
            border-width: 0px
          }

          :nth-child(2) {
            width: 60px;
            height: 16px;
            text-align: center;
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #EDEDED;
          }
        }
      }
    }

    //手动模式
    .center-box2-1 {
      width: 98%;
      height: 40%;
      background: #081a46;
      border: 1px solid #262E63;
      border-top: none;
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      align-items: center;

      .right-bottomTitle {
        width: 98%;
        height: 10%;
        margin-top: 2px;
        //background-color: #ebb42a;
        //margin-bottom: 2px;

        >p {
          width: 95px;
          height: 20px;
          font-size: 15px;
          margin-left: 2%;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #EDEDED;
        }

        span {
          display: block;
          width: 52px;
          height: 2px;
          margin-left: 2.5%;
          background: #4691FF;
        }
      }

      .right-bottomBox {
        width: 98%;
        height: 85%;
        //background-color: #00FF00;

        .right-bottomBox1 {
          width: 100%;
          height: 50%;
          /// background-color: #54619D;

          .right-bottomBox1-1 {
            width: 100%;
            height: 50%;
            display: flex;
            align-items: center;
            justify-content: center;

            //background-color: #2ec7a1;
            >p {
              width: 80px;
              height: 25px;
              display: flex;
              align-items: center;
              justify-content: center;
              background: #0F1A43;
              border: 2px solid #54619D;
              border-radius: 10px;
              font-size: 12px;
              font-family: Bahnschrift;
              font-weight: 400;
              color: #C1C1C1;
            }

            span {
              display: block;
              margin-top: 1%;
              width: 8px;
              height: 8px;
              margin-left: 0.5%;
              margin-bottom: 10px;
              font-size: 12px;
              font-family: Bahnschrift;
              font-weight: 400;
              color: #C1C1C1;
            }

            .btn {
              width: 80px;
              height: 25px;
              display: flex;
              justify-content: center;
              align-items: center;
              background: linear-gradient(0deg, #0D1538, #1B2D67);
              border: 2px solid #2B5B9B;
              border-radius: 4px;
              font-size: 12px;
              font-family: Bahnschrift;
              font-weight: 400;
              color: #C1C1C1;
              margin-left: 30px;
            }
          }

          .right-bottomBox1-2 {
            width: 100%;
            height: 50%;
            display: flex;
            align-items: center;
            justify-content: center;

            span {
              display: block;
              // margin-top: 1%;
              width: 8px;
              height: 8px;
              // margin-left: 0.5%;
              //margin-bottom: 10px;
              font-size: 12px;
              font-family: Bahnschrift;
              font-weight: 400;
              color: #C1C1C1;
            }

            .btn {
              width: 80px;
              height: 25px;
              display: flex;
              justify-content: center;
              align-items: center;
              background: linear-gradient(0deg, #0D1538, #1B2D67);
              border: 2px solid #2B5B9B;
              border-radius: 4px;
              font-size: 12px;
              font-family: Bahnschrift;
              font-weight: 400;
              color: #C1C1C1;
              margin-left: 30px;
            }
          }
        }

        .right-bottomBox1-3 {
          width: 100%;
          height: 25%;
          display: flex;
          align-items: center;
          justify-content: center;

          //background-color: #75bfff;
          .right-bottomBox1-3-1 {
            width: 60%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;

            //background-color: #f391f3;
            .btn1 {
              width: 50px;
              height: 25px;
              display: flex;
              justify-content: center;
              align-items: center;
              background: linear-gradient(0deg, #0D1538, #0D817A);
              border: 2px solid #2ec7a1;
              font-size: 12px;
              font-family: Bahnschrift;
              font-weight: 400;
              color: #C1C1C1;
              margin-right: 48px;
            }

            .btn2 {
              width: 50px;
              height: 25px;
              display: flex;
              justify-content: center;
              align-items: center;
              background: linear-gradient(0deg, #0D1538, #337F17);
              border: 2px solid #3CA813;
              font-size: 12px;
              font-family: Bahnschrift;
              font-weight: 400;
              color: #C1C1C1;
            }
          }

        }

        .right-bottomBox1-4 {
          width: 100%;
          height: 25%;
          display: flex;
          align-items: center;
          justify-content: center;

          //background-color: #df971a;
          .right-bottomBox1-4-1 {
            width: 45%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-around;

            //background-color: #21df1a;
            .btn1 {
              width: 50px;
              height: 25px;
              display: flex;
              justify-content: center;
              align-items: center;
              background: linear-gradient(0deg, #0D1538, #1B2D67);
              border: 2px solid #2B5B9B;
              font-size: 12px;
              font-family: Bahnschrift;
              font-weight: 400;
              color: #C1C1C1;
            }

            .btn2 {
              width: 50px;
              height: 25px;
              display: flex;
              justify-content: center;
              align-items: center;
              background: linear-gradient(0deg, #0D1538, #065D70);
              border: 2px solid #108B8F;
              font-size: 12px;
              font-family: Bahnschrift;
              font-weight: 400;
              color: #C1C1C1;
              //margin-left: 10px;
            }

            .btn3 {
              width: 50px;
              height: 25px;
              //margin-left: 10px;
              display: flex;
              justify-content: center;
              align-items: center;
              background: linear-gradient(0deg, #4C0820, #0D1538);
              border: 2px solid #942028;
              font-size: 12px;
              font-family: Bahnschrift;
              font-weight: 400;
              color: #C1C1C1;
            }
          }
        }
      }

    }

    //自动模式
    .center-box2-2 {
      width: 98%;
      height: 40%;
      background: #081a46;
      border: 1px solid #2A2E4A;
      border-top: none;
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      align-items: center;

      .right-bottomTitle {
        width: 98%;
        height: 20%;
        margin-top: 1%;

        //background-color: #00FF00;
        >p {
          width: 95px;
          height: 26px;
          font-size: 15px;
          margin-left: 2%;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #EDEDED;
        }

        span {
          display: block;
          width: 52px;
          height: 2px;
          margin-left: 2.5%;
          background: #4691FF;
        }
      }

      .right-bottomBox1 {
        width: 50%;
        height: 30%;
        margin-left: 2%;
        // background-color: #108B8F;
        display: flex;
        align-items: flex-end;
        justify-content: center;

        >span {
          display: block;
          //margin-top: 5px;
          margin-left: 4px;
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #EDEDED;
        }

        .btn {
          width: 80px;
          height: 25px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: linear-gradient(0deg, #0D1538, #1B2D67);
          border: 2px solid #2B5B9B;
          border-radius: 4px;
          font-size: 12px;
          margin-left: 8px;
          font-family: Bahnschrift;
          font-weight: 400;
          color: #C1C1C1;
        }
      }

      .right-bottomBox2 {
        width: 50%;
        height: 40%;
        //background-color: #2B5B9B;
        display: flex;
        justify-content: space-around;
        align-items: flex-end;

        .btn1 {
          width: 50px;
          height: 25px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: linear-gradient(0deg, #0D1538, #1B2D67);
          border: 2px solid #2B5B9B;
          border-radius: 4px;
          font-size: 12px;
          //margin-left: 8px;
          font-family: Bahnschrift;
          font-weight: 400;
          color: #C1C1C1;
        }

        .btn2 {
          width: 50px;
          height: 25px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: linear-gradient(0deg, #0D1538, #065D70);
          border: 2px solid #108B8F;
          border-radius: 4px;
          font-size: 12px;
          //margin-left: 8px;
          font-family: Bahnschrift;
          font-weight: 400;
          color: #C1C1C1;
        }

        .btn3 {
          width: 50px;
          height: 25px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: linear-gradient(0deg, #0D1538, #337F17);
          border: 2px solid #3CA813;
          border-radius: 4px;
          font-size: 12px;
          //margin-left: 8px;
          font-family: Bahnschrift;
          font-weight: 400;
          color: #C1C1C1;
        }
      }
    }

    //一键返航
    .center-box2-3 {
      width: 98%;
      height: 40%;
      background: #081a46;
      border: 1px solid #2A2E4A;
      border-top: none;
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      align-items: center;

      .right-bottomTitle {
        width: 98%;
        height: 15%;
        margin-top: 1%;

        //background-color: #00FF00;
        >p {
          width: 95px;
          height: 20px;
          font-size: 15px;
          margin-left: 2%;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #EDEDED;
        }

        span {
          display: block;
          width: 52px;
          height: 2px;
          margin-left: 2.5%;
          background: #4691FF;
        }
      }

      .right-bottomBox {
        width: 98%;
        height: 85%;

        //background-color: #108B8F;
        .right-bottomBox1 {
          width: 100%;
          height: 40%;
          display: flex;
          justify-content: center;
          align-items: center;
          //background-color: #1b60e1;
          .btn1 {
            width: 50px;
            height: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(0deg, #0D1538, #0D817A);
            border: 2px solid #2ec7a1;
            font-size: 12px;
            font-family: Bahnschrift;
            font-weight: 400;
            color: #C1C1C1;
          }

          .btn2 {
            width: 50px;
            height: 20px;
            margin-left: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(0deg, #0D1538, #337F17);
            border: 2px solid #3CA813;
            font-size: 12px;
            font-family: Bahnschrift;
            font-weight: 400;
            color: #C1C1C1;
          }
        }

        .right-bottomBox2 {
          width: 100%;
          height: 40%;
          display: flex;
          justify-content: center;
          align-items: center;
          //background-color: #75bfff;
          .btn {
            width: 50px;
            height: 25px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(0deg, #0D1538, #1B2D67);
            border: 2px solid #2B5B9B;
            border-radius: 4px;
            font-size: 12px;
            //margin-left: 8px;
            font-family: Bahnschrift;
            font-weight: 400;
            color: #C1C1C1;
          }
        }
      }

    }

    //自由模式
    .center-box2-4 {
      width: 98%;
      height: 40%;
      background: #081a46;
      border: 1px solid #2A2E4A;
      border-top: none;
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      align-items: center;

      .right-bottomTitle {
        width: 98%;
        height: 15%;
        // background-color: #00FF00;
        >p {
          width: 95px;
          height: 20px;
          font-size: 15px;
          margin-left: 2%;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #EDEDED;
        }

        span {
          display: block;
          width: 52px;
          height: 2px;
          margin-left: 2.5%;
          background: #4691FF;
        }
      }

      .right-bottomBox {
        width: 98%;
        height: 85%;
        //background-color: #2ec7a1;
        .right-bottomBox1 {
          width: 100%;
          height: 30%;
          display: flex;
          justify-content: center;
          align-items: center;
          //background-color: hotpink;
          >span {
            display: block;
            //margin-top: 5px;
            margin-left: 4px;
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #EDEDED;
          }

          .btn {
            width: 80px;
            height: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(0deg, #0D1538, #1B2D67);
            border: 2px solid #2B5B9B;
            border-radius: 4px;
            font-size: 12px;
            margin-left: 8px;
            font-family: Bahnschrift;
            font-weight: 400;
            color: #C1C1C1;
          }
        }

        .right-bottomBox2 {
          width: 100%;
          height: 28%;
          display: flex;
          justify-content: center;
          align-items: center;
          //background-color: #bfd612;
          .btn1 {
            width: 50px;
            height: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(0deg, #0D1538, #0D817A);
            border: 2px solid #2ec7a1;
            font-size: 12px;
            font-family: Bahnschrift;
            font-weight: 400;
            color: #C1C1C1;
          }

          .btn2 {
            width: 50px;
            height: 20px;
            margin-left: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(0deg, #0D1538, #337F17);
            border: 2px solid #3CA813;
            font-size: 12px;
            font-family: Bahnschrift;
            font-weight: 400;
            color: #C1C1C1;
          }
        }

        .right-bottomBox3 {
          width: 100%;
          height: 28%;
          display: flex;
          align-items: center;
          justify-content: center;
          //background-color: #fd90f8;
          .btn1 {
            width: 50px;
            height: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(0deg, #0D1538, #1B2D67);
            border: 2px solid #2B5B9B;
            font-size: 12px;
            font-family: Bahnschrift;
            font-weight: 400;
            color: #C1C1C1;
          }

          .btn2 {
            width: 50px;
            height: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(0deg, #0D1538, #065D70);
            border: 2px solid #108B8F;
            font-size: 12px;
            font-family: Bahnschrift;
            font-weight: 400;
            color: #C1C1C1;
            margin-left: 30px;
            margin-right: 30px;
          }

          .btn3 {
            width: 50px;
            height: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(0deg, #4C0820, #0D1538);
            border: 2px solid #942028;
            font-size: 12px;
            font-family: Bahnschrift;
            font-weight: 400;
            color: #C1C1C1;
          }
        }
      }
    }
  }


  //右边
  .video-right {
    width: 48%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .right-header {
      width: 98%;
      height: 65px;
      margin-bottom: 8px;
      border: 1px solid #2A2E4A;
      border-top: none;
      border-radius: 0px 0px 4px 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: #081a46;

      p {
        width: 148px;
        height: 30px;
        line-height: 30px;
        font-size: 20px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #E9E9E9;
      }
    }

    .videoBox {
      width: 98%;
      height: calc(100vh - 98px);
      display: flex;
      flex-direction: column;
      //justify-content: center;
      align-items: center;
      border: 1px solid #262E63;
      border-radius: 4px;
      background: #081a46;

      .videobox1 {
        width: 99.9%;
        height: 50%;
        display: flex;
        margin-bottom: 4px;

        .box {
          width: 50%;
          height: 100% !important;
          /*新增高度 2023-5-6*/
          display: flex;
          justify-content: center;
          align-items: center;
          background: #000000;
          border: 1px solid #2A2E4A;
          background-image: url(../../components/images/jiankong.png);
          background-repeat: no-repeat;
          background-position: center center;
          //隐藏video播放按钮
          /*.video::-webkit-media-controls-play-button{*/
          /*  display: none !important;*/
          /*}*/

        }

        .video-js {
          background-color: rgb(1 5 43);
          object-fit: fill;
          //隐藏video播放按钮
        }

        video {
          pointer-events: none;
        }

        //隐藏video播放按钮
        video::-webkit-media-controls-play-button {
          display: none !important;
        }

        //隐藏video音量进度条
        video::-webkit-media-controls-volume-slider {
          display: none !important;
        }

        //隐藏video音量按钮
        video::-webkit-media-controls-mute-button {
          display: none !important;
        }

        video::-webkit-media-controls-toggle-closed-captions-button {
          display: none !important;
        }

        //隐藏当前时间
        video::-webkit-media-controls-current-time-display {
          display: none !important;
        }

        //隐藏剩余时间
        video::-webkit-media-controls-time-remaining-display {
          display: none !important;
        }

        //隐藏进度条
        video::-webkit-media-controls-timeline {
          display: none !important;
        }

        //更多选项
        video::-internal-media-controls-overflow-button {
          display: none !important;
        }

        .active {
          border: 1px solid #00FF00;
        }
      }

      .videobox2 {
        width: 99%;
        height: 15%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 3%;

        .videobox2-1 {
          width: 98%;
          height: 20%;
          margin-bottom: 2%;

          p {
            font-size: 14px;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: #EDEDED;
            margin-left: 2%;
          }

          span {
            display: block;
            margin-left: 2.5%;
            width: 36px;
            height: 2px;
            background: #4691FF;
          }
        }

        .videobox2-2 {
          width: 98%;
          height: 80%;
          display: flex;
          justify-content: center;

          .videobox2-2-1 {
            width: 20%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            >P {
              width: 90px;
              height: 25px;
              margin-top: 5%;
              display: flex;
              justify-content: center;
              align-items: center;
              background: #0F1A43;
              border: 2px solid #54619D;
              border-radius: 10px;
              font-size: 12px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #C1C1C1;
            }
          }

          .videobox2-2-3 {
            width: 20%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .btn1 {
              width: 70px;
              height: 25px;
              margin-top: 5%;
              display: flex;
              justify-content: center;
              align-items: center;
              background: linear-gradient(0deg, #0D1538, #1B2D67);
              border: 2px solid #2B5B9B;
              border-radius: 4px;
              font-size: 12px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #EDEDED;
              margin-bottom: 5%;
            }

            .btn2 {
              width: 70px;
              height: 25px;
              // margin-top: 27%;
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 12px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #EDEDED;
              background: linear-gradient(0deg, #0D1538, #1B2D67);
              border: 2px solid #2B5B9B;
              border-radius: 4px;
            }
          }

          .videobox2-2-4 {
            width: 20%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .btn {
              width: 70px;
              height: 25px;
              margin-top: 5%;
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 12px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #EDEDED;
              background: linear-gradient(0deg, #0D1538, #1B2D67);
              border: 2px solid #2B5B9B;
              border-radius: 4px;
            }

            btn:nth-child(2) {
              margin-left: -0.5%;
            }
          }

          .videobox2-2-5 {
            width: 20%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .btn {
              width: 90px;
              height: 25px;
              display: flex;
              justify-content: center;
              align-items: center;
              background: linear-gradient(0deg, #0D1538, #673B1B);
              border: 2px solid #9B6D2B;
              border-radius: 4px;
              font-size: 12px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #EDEDED;
            }

            :nth-child(2) {
              margin-top: 5%;
            }
          }

        }
      }

      .videobox3 {
        width: 98%;
        height: 28%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 2%;
        //background-color: #00FF00;

        .videobox3-1 {
          width: 98%;
          height: 10%;

          p {
            font-size: 16px;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: #EDEDED;
            margin-left: 2%;
          }

          span {
            display: block;
            margin-left: 3%;
            width: 20px;
            height: 2px;
            background: #4691FF;
          }
        }

        .videobox3-2 {
          width: 98%;
          height: 90%;
          display: flex;
          align-items: center;
          justify-content: space-around;
          //margin-top: 1%;
          //background-color: #0051ff;

          .ptz {
            position: relative;
            width: 264px;
            /* padding: 10px; */
            height: 180px;
            //background-color: aquamarine;
            display: flex;
            justify-content: center;
            align-items: center;
          }

          .circle-left {
            width: 73px;
            height: 146px;
            /* border: 1px solid #fff; */
            border-radius: 0px 73px 73px 0px;
            position: absolute;
            right: 0;
            transform-origin: 0 50%;
          }

          .circle-right {
            width: 73px;
            height: 146px;
            /* border: 1px solid #fff; */
            border-radius: 73px 0px 0px 73px;
            position: absolute;
            right: 0;
            transform-origin: 100% 50%;
          }

          /* 八等份分割线 */
          #Canvas {
            position: absolute;
            z-index: 1;
            pointer-events: none;
            left: 87px;
            top: 27px;
            transform: rotate(-22.5deg);
          }

          /* 外圆环 */
          #round {
            width: 160px;
            height: 160px;
            background-color: #081a46;
            border-radius: 50%;
            position: absolute;
            left: 80px;
            top: 10px;
            z-index: 0;
          }

          /* 黑色内圆环 */
          #center_black {
            width: 74px;
            height: 74px;
            background-color: #081a46;
            border-radius: 50%;
            position: absolute;
            left: 123px;
            top: 53px;
            z-index: 1;
          }

          /* 中心蓝色圆环 */
          #center_blue {
            width: 60px;
            height: 60px;
            text-align: center;
            background: linear-gradient(68deg, #3040F4, #3F79F4);
            border-radius: 50%;
            position: absolute;
            left: 130px;
            top: 60px;
            z-index: 2;
          }

          #center_blue span {
            position: absolute;
            left: 17px;
            top: 22px;
            font-size: 14px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #ededed;
          }

          /* 圆八等份 */
          #circle0 {
            width: 146px;
            height: 146px;
            border-radius: 73px;
            top: 0px;
            background-color: #0f2140;
            position: absolute;
            left: 87px;
            top: 17px;
            z-index: 0;
            pointer-events: auto;
            transform: rotate(-22.5deg);
          }

          #left {
            /* 用矩形切割半圆 */
            clip: rect(0px 73px 146px 0px);
            position: absolute;
            right: 0px;
            width: 73px;
            height: 146px;
            overflow: hidden;
            border-left: 2px solid #011137;
          }

          #right {
            clip: rect(0px 78px 146px 0px);
            position: absolute;
            left: 0px;
            width: 73px;
            height: 146px;
            overflow: hidden;
            //border-right: 2px solid #011137;
          }

          #circle2:hover,
          #circle3:hover,
          #circle4:hover,
          #circle5:hover,
          #circle6:hover,
          #circle7:hover,
          #circle8:hover,
          #circle9:hover,
          #center_blue:hover {
            cursor: pointer;
          }

          #circle2 {
            background-color: #0a2056;
            //border-left: 2px solid #011137;
          }

          #circle2 span {
            position: absolute;
            left: 14px;
            top: 15px;
            transform: rotate(22.5deg);
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #ededed;
          }

          #circle3 {
            background-color: #0a2056;
            transform: rotate(45deg);
            border-left: 2px solid #011137;
          }

          #circle3 span {
            position: absolute;
            left: 10px;
            top: 15px;
            transform: rotate(22.5deg);
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #ededed;
          }

          #circle4 {
            background-color: #0a2056;
            transform: rotate(90deg);
            border-left: 2px solid #011137;
          }

          #circle4 span {
            position: absolute;
            left: 15px;
            top: 15px;
            transform: rotate(22.5deg);
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #ededed;
          }

          #circle5 {
            background-color: #0a2056;
            transform: rotate(135deg);
            border-left: 2px solid #011137;
          }

          #circle5 span {
            position: absolute;
            left: 12px;
            top: 15px;
            transform: rotate(22.5deg);
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #ededed;
          }

          #circle6 {
            background-color:#0a2056;
            transform: rotate(225deg);
            border-right: 2px solid #011137;
          }

          #circle6 span {
            position: absolute;
            right: 14px;
            top: 15px;
            transform: rotate(-22.5deg);
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #ededed;
          }

          #circle7 {
            background-color: #0a2056;
            transform: rotate(270deg);
            border-right: 2px solid #011137;
          }

          #circle7 span {
            position: absolute;
            right: 10px;
            top: 15px;
            transform: rotate(-22.5deg);
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #ededed;
          }

          #circle8 {
            background-color:#0a2056;
            transform: rotate(315deg);
            border-right: 2px solid #011137;
          }

          #circle8 span {
            position: absolute;
            right: 15px;
            top: 15px;
            transform: rotate(-22.5deg);
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #ededed;
          }

          #circle9 {
            background-color:#0a2056;
            transform: rotate(360deg);
          }

          #circle9 span {
            position: absolute;
            right: 10px;
            top: 15px;
            transform: rotate(-22.5deg);
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #ededed;
          }

          .videobox3-3 {
            width: 30%;
            height: 80%;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 1%;
            // margin-left: -20%;
            justify-content: space-around;

            // background-color: #00FF00;
            .videobox3-3-1 {
              width: 90%;
              display: flex;
              justify-content: space-around;
              align-items: center;

              .btn1 {
                width: 32px;
                height: 32px;
                background: linear-gradient(68deg, #3040F4, #3F79F4);
                border-radius: 50%;
                border: none;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 12px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #EDEDED;
                cursor: pointer;
                margin-bottom: 4px;
              }

              p {
                width: 26px;
                height: 18px;
                font-size: 12px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #EDEDED;
                margin-bottom: 4px;
              }

              .btn2 {
                width: 32px;
                display: flex;
                justify-content: center;
                align-items: center;
                height: 32px;
                background: linear-gradient(68deg, #3040F4, #3F79F4);
                border-radius: 50%;
                border: none;
                font-size: 12px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #EDEDED;
                cursor: pointer;
                margin-bottom: 4px;
              }
            }
          }
        }
      }
    }
  }</style>
